请用vue2跟element ui来封装
时间: 2023-07-17 11:12:23 浏览: 54
当然可以!以下是一个简单的示例,展示了如何使用Vue 2和 UI来封装一个简单的组:
首先,确保已经安装了Vue和Element UI库。可以使用以下命令进行安装:
```bash
npm install vue@2.6.14
npm install element-ui@2.15.1
```
然后,在Vue文件中,引入Vue和Element UI的库:
```javascript
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
```
接下来,创建一个自定义的Vue组件,例如一个简单的按钮组件:
```javascript
<template>
<el-button @click="handleClick" type="primary">{{ buttonText }}</el-button>
</template>
<script>
export default {
data() {
return {
buttonText: 'Click me!' // 默认按钮文本
};
},
methods: {
handleClick() {
alert('Button clicked!'); // 点击按钮时触发的方法
}
}
};
</script>
```
最后,在主Vue实例中使用该自定义组件:
```javascript
<template>
<div>
<my-button></my-button>
</div>
</template>
<script>
import MyButton from './MyButton.vue';
export default {
components: {
'my-button': MyButton
}
};
</script>
```
以上代码展示了如何使用Vue 2和Element UI来封装一个简单的按钮组件。你可以根据自己的需求进行扩展和修改。希望这能帮到你!