在html文件中直接使用vue和element-ui
使用原因
Vue脚手架太重，不适合和其他的框架融合。所以直接使用html编写简单的element-ui。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import element-ui CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- import element-ui JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<!--编写标签-->
<div id="app">
<el-row>
<el-button @click="open">默认按钮</el-button>
<el-button type="primary" @click="open">主要按钮</el-button>
<el-button type="success" @click="open">成功按钮</el-button>
<el-button type="info" @click="open">信息按钮</el-button>
<el-button type="warning" @click="open">警告按钮</el-button>
<el-button type="danger" @click="open">危险按钮</el-button>
</el-row>
</div>
</body>
<script>
// 创建vue
new Vue({
// 控制的标签容器
el: '#app',
// 交互的数据
data: function () {
return {visible: false}
},
// 方法
methods: {
open() {
this.$alert('这是一段内容', '标题名称', {
confirmButtonText: '确定',
callback: action => {
this.$message({
type: 'info',
message: `action: ${action}`
});
}
});
}
}
})
</script>
</html>
效果
698
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
