Vue（五）- element ui库安装和使用过程中遇到的坑

1. 安装和引入

npm i element-ui –S

//vue_demo\src\main.js中引入文件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

2. UI组件使用遇到的坑点

Layout布局

1. :span=“24”，为啥赋值24，还用：

<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>

解答： 只要传入的不是字符串，都用：，否则会被当作字符串处理。
这个在props的规则校验中是深有体会的。

2. col 24栅格，但是col间的padding设置始终无效

<el-row :gutter="20">
  <el-col :span="6"><div></div></el-col>
  <el-col :span="6"><div></div></el-col>
  <el-col :span="6"><div></div></el-col>
  <el-col :span="6"><div></div></el-col>
</el-row>

解答：div 必须，加入的时候，css设置中出现 element.type。
可以用下面强制改掉默认的padding-left: 10px;

.el-col {
padding-right: 5px !important;
}

对话框

1. 点击空白处无处理close-on-click-modal
2. Visible.sync 父子组件同步，即点击X—》关闭dialog。
   如果去除sync,可将代码改为下面，达到一样的效果。

handleClose(done) {
   
            this.$confirm('确认关闭？')
            .then(_ => {
   
                this.dialogVisible = false;
                done()