vue使用element-ui中的dialog对话框显示项目外的链接网页及样式修改

//触发事件按钮
<el-button type="text"style="height:15px;color:black;font-size: 21px"  @click="open(scope.row.url)">{{scope.row.title}}</el-button>

//对话框
<el-dialog
        title="小主儿真是一个关心时事的小可爱🤭"
        :visible.sync="dialogVisible"
        top="50px"
        center="true"
        width="40%">
    <iframe style="width: 620px;height: 500px;margin-top: 10px;margin-top: -10px;" :src="url"></iframe>
</el-dialog>

js中的内容：
export default {
    name: 'dashboard',
    data() {
        return {
            dialogVisible: false,
            url:'',
        };
    },

 

methods: {
    open(url) {
        /*this.$alert('<iframe src="'+url+'"></iframe>', 'HTML 片段', {
            dangerouslyUseHTMLString: true
        });*/
        this.url=url;
        this.dialogVisible=true
    },
}

}

<style >//注意去掉style中的scoped，否则css无效
    .el-dialog__header {
        background-color: hotpink;
    }
    .el-dialog__body {
        padding: 10px 20px;
        color: #606266;
    }

</style >