• 一起学Vue:UI框架(elementui)


    目标

    使用Vue+ElementUI构建一个非常简单CRUD应用程序,以便您更好地了解它的工作方式。

    效果页面

    比如我们要实现这样列表、新增、编辑三个页面:

    列表页面

    新增页面

    编辑页面

    安装element

    我们使用 vue-cli@3 进行安装

    vue add element
    

    列表组件(TodoListWithUI.vue)

    与我们上次讲的无UI的列表组件逻辑基本都是一样的,我们这里主要用到了el-table,el-button这两个UI组件,至于UI组件的用法我们这里就不介绍了,大家直接上官网上看示例代码就好了,我们在这里直接贴代码:

    <template>
    <div style="text-align:left">
        <el-button type="text" @click="addTodo()">新增</el-button>
        <el-table :data="Todos" style=" 100%">
            <el-table-column type="index" width="50">
            </el-table-column>
            <el-table-column prop="Name" label="名称">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="editTodo(scope.$index)" type="text" size="small">编辑</el-button>
                    <el-button @click="deleteTodo(scope.$index)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <TodoAddWithUI :dialogVisible="addDialogVisible" :selectedItem="selectedItem" @save="createTodo"  @cancel="cancel"></TodoAddWithUI>
        <TodoEditWithUI :dialogVisible="editDialogVisible" :selectedItem="selectedItem" @save="updateTodo" @cancel="cancel"></TodoEditWithUI>
    </div>
    </template>
    
    <script>
    import TodoAddWithUI from './TodoAddWithUI.vue'
    import TodoEditWithUI from './TodoEditWithUI.vue'
    export default {
        components: {
            TodoAddWithUI,
            TodoEditWithUI
        },
        data() {
            return {
                selectedIndex: -1, // 选择了哪条记录
                selectedItem: {}, // 选中的信息
                addDialogVisible: false,
                editDialogVisible: false,
                Todos: [{
                        Name: "遛狗"
                    },
                    {
                        Name: "跑步"
                    }
                ]
            };
        },
        methods: {
            setTodos(arr) {
                this.Todos = JSON.parse(JSON.stringify(arr));
            },
            addTodo() {
                this.addDialogVisible = true;
            },
            createTodo(item) {
                this.Todos.push(item);
                this.setTodos(this.Todos);
                this.selectedIndex = -1;
                this.selectedItem = {}
                this.addDialogVisible = false;
            },
            editTodo(index) {
                this.selectedIndex = index;
                this.selectedItem = JSON.parse(JSON.stringify(this.Todos[index]));
                this.editDialogVisible = true;
            },
            updateTodo(item) {
                this.Todos[this.selectedIndex] = item;
                this.setTodos(this.Todos);
                this.selectedIndex = -1;
                this.selectedItem = {}
                this.editDialogVisible = false;
            },
            deleteTodo(index) {
                this.Todos.splice(index, 1);
                this.selectedIndex = -1;
                this.selectedItem = {}
            },
            cancel() {
                this.addDialogVisible = false;
                this.editDialogVisible = false;
            },
        }
    };
    </script>
    

    新增组件(TodoAddWithUI.vue)

    我们主要用到了el-dialog,el-form,直接贴代码:

    <template>
    <el-dialog title="待办事项(新增)" :visible.sync="dialogVisible">
      <el-form>
        <el-form-item label="名称">
          <el-input v-model="selectedItem.Name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
    </template>
    
    <script>
    export default {
        props: {
            selectedItem: Object,
            dialogVisible: Boolean,
        },
        methods: {
            save() {
                this.$emit('save', this.selectedItem);
            },
            cancel() {
                this.$emit('cancel');
            }
        }
    };
    </script>
    
    <style scoped>
    </style>
    

    编辑组件(TodoEditWithUI.vue)

    我TodoAddWithUI基本上一样,你也可以把这两个合并成一个组件,我们为了逻辑更加清楚就分开了,直接贴代码:

    <template>
    <el-dialog title="待办事项(编辑)" :visible.sync="dialogVisible">
      <el-form>
        <el-form-item label="名称">
          <el-input v-model="selectedItem.Name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
    </template>
    
    <script>
    export default {
        props: {
            selectedItem: Object,
            dialogVisible: Boolean,
        },
        methods: {
            save() {
                this.$emit('save', this.selectedItem);
            },
            cancel() {
                this.$emit('cancel');
            }
        }
    };
    </script>
    
    <style scoped>
    </style>
    

    小结

    目前为止,我们完成了Vue+ElementUI的CRUD,是不是还是挺简单的呀。其实你如果用其他的UI框架,操作方式也差不多。

    文中用到的代码我们放在:https://github.com/zcqiand/miscellaneous/tree/master/vue

    在这里我推荐一些人气比较高的UI框架:

    1.Vuetify

    Star 数为 11K,提供了 80 多个 Vue.js 组件,这些组件是根据谷歌 Material Design 指南实现的。Vuetify 支持所有平台上的浏览器,包括 IE11 和 Safari 9+(使用 polyfill),并提供了 8 个 vue-cli 模板。

    地址:https://github.com/vuetifyjs/vuetify

    2.Quasar

    Star 数超过 6K,是构建 Vue.js 响应式网站、PWA、混合移动应用和 Electron 应用的流行框架。Quasar 还支持诸如 HTML/CSS/JS 压缩、缓存清除、摇树优化(tree shaking)、源映射、代码分割和延迟加载、ES6 转码等功能。

    地址:https://github.com/quasarframework/quasar

    3. Vux

    Star 数超过 13K,是一个流行的社区库,基于 WeUI 和 Vue 2.0。该库还支持 webpack+vue-loader+vux 的工作流。它的文档也是中文的。

    地址:https://github.com/airyland/vux

    4. iView

    Star 数将近 16K,提供了数十种用 Vue.js 构建的 UI 组件和小部件,并采用了干净而优雅的设计。iView 被广泛采用,社区也在积极维护,并提供了 CLI 工具用于以可视化的方式创建项目。这个也值得一试。

    地址:https://github.com/iview/iview

    5.Mint UI

    Star 数超过 11K,为 Vue.js 提供 UI 元素,提供了用于构建移动应用程序的 CSS 和 JS 组件。当全部导入时,压缩后的代码只有月 30KB(JS+CSS),当然它也支持单个组件的导入。

    地址:https://github.com/ElemeFE/mint-ui/

    6.Ant Design Vue

    Star 数约 1.5K,用于开发具有数十个 Ant Design 实现组件的企业级后端产品,并支持基于 Webpack 调试的构建解决方案(支持 ES6)。请注意,它的开发已经停止了一段时间。

    地址:https://github.com/okoala/vue-antd

  • 相关阅读:
    VMware虚拟机安装红帽系统无法上网解决办法(转)
    二维指针的malloc内存分配(转)
    c语言中如何通过二级指针来操作二维数组
    如何把一个二维数组的地址赋给一个二维指针?
    二维数组及二维指针的传递及一些思考(转)
    js怎么让时间函数的秒数在页面上显示是变化的
    jquery 实现各种统计图网址
    WEB的相关知识总结
    JS同名方法,
    web components思想如何应用于实际项目
  • 原文地址:https://www.cnblogs.com/zcqiand/p/13893444.html
Copyright © 2020-2023  润新知