探索element-ul的神奇功能：从克隆到滑动，让你的网页更加动态！

文章目录

• • 概要
  • 整体架构流程
  • 技术名词解释
  • 技术细节
  • 小结

概要

Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是Mint UI 。Element UI是一个基于Vue.js的组件库，它提供了丰富的UI组件和工具，可以帮助开发者快速构建现代化的Web应用程序。通过引入element-ui的js和css文件，你可以在你的项目中使用element-ui的组件和样式。

总之，element-ui是一个功能强大的Vue.js组件库，可以帮助你快速构建漂亮的用户界面。

整体架构流程

一般组件使用

element-ui的基本使用还是十分简单的，首先根据文档的步骤进行安装，导入需要的样式即可，这一块直接看文档就已经说明的很清楚了：文档链接。接着，你只需要找到你想要的样式，然后点开详细代码，复制到你的.vue文件里那么就可以了，例如直接复制官方提供的radio组件(链接)的第一个代码：

<template>
  <div>
      <!-- 因为template里面只能有一个根元素，官方这里拷过来以后在外面加了一层div标签包起来 -->
    <el-radio v-model="radio" label="1">备选项</el-radio>
    <el-radio v-model="radio" label="2">备选项</el-radio>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      radio: "1"
    };
  }
};
</script>

官网链接：Element - The world's most popular Vue UI framework

可以看出element-ui的上手使用还是挺容易的，在理想情况下，只需要以下步骤：

1. 找想要的样式组件
2. 复制代码到对应的.vue文件
3. 修改对应的数据

我在这里有两种途径引入样式：

第一种离线模式：

<link rel="stylesheet"  href="/element-ui/index.css">
<script src="/element-ui/index.js"></script>

第二种在线模式：

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

第一种情况需要导入对应样式，我是通过官网下载到文件夹下，通过引入样式和引入样式表，再去官网找自己喜欢的样式组件，复制粘贴template中的代码，style样式和vue组件。如图所示：

非组件样式使用

官方提供的样式中有一部分并非是组件样式，比如：字体图标、全局指令、全局事件等，这里简单说明下这类样式的使用方法

图标样式使用

官方提供了很多图标样式（链接），通过阅读文档可以发现：一般情况下，使用i标签，并将class属性设置成对应的图标名即可；而对于别的组件希望引入图标时（有icon属性的组件，例如el-button），设置icon属性为对应的图标名即可

指令样式使用

例如Loading加载（链接），其提供的是一个指令v-loading，而非一个组件，那么使用也很简单，因为已经注册了全局组件，直接调用就行了，举例：

<template>
  <div>
    <div v-loading="isLoading">这块内容使用v-loading指令，true时loading</div>
    <el-button @click=handle>{{clickText}}</el-button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isLoading: true,
      clickText: "取消loading"
    }
  },
  methods:{
      handle(){
          this.isLoading = !this.isLoading
          if (this.isLoading) {
              this.clickText = "取消loading"
          } else {
              this.clickText = "继续loading"
          }
      }
  }
};
</script>

事件样式使用

例如Message消息提示（链接），其提供是也不是组件，而是发送一个事件，那么使用时只需要参考文档发送的数据属性选项即可

技术名词解释

Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法。导航栏建立在nav组件之上，享有专属的class样式。导航栏默认内容是流式的，使用container容器来限制它们的水平宽度。使用提供的间隙间距和flex布局 classes 来定义导航栏中元素的间距和对齐。navbars导航栏默认支持响应式。

相比之下，element-ul与Bootstrap的区别在于它们的使用方式和样式。element-ul是element-ui框架中的一个组件，用于创建列表。而Bootstrap中的导航栏使用ul>li>a的结构来创建分页导航或导航条。

优点方面，Bootstrap的导航栏具有以下几个优点：

1. 响应式支持：Bootstrap的导航栏默认支持响应式布局，可以在不同设备上自动适应。
2. 简单易用：使用ul>li>a的结构，加上相应的class样式，可以快速创建出漂亮的导航栏。
3. 可定制性强：Bootstrap提供了丰富的class样式和组件，可以根据需求自定义导航栏的样式和布局。
4. 社区支持：Bootstrap是一个流行的前端框架，有庞大的开发者社区，可以方便地获取支持和资源。

而element-ul作为element-ui框架的一部分，也有其自身的优点，比如：

1. 功能丰富：element-ui提供了很多其他组件和功能，可以方便地与element-ul组件进行配合使用。
2. 风格统一：element-ui的组件都遵循相同的设计风格和样式，可以保持整个项目的一致性。
3. 文档完善：element-ui提供了详细的文档和示例，方便开发者学习和使用。

综上所述，Bootstrap的导航栏具有响应式支持、简单易用、可定制性强和社区支持等优点，而element-ul作为element-ui框架的一部分，具有功能丰富、风格统一和文档完善等优点。选择使用哪个取决于具体项目需求和个人偏好。

技术细节

通过上述技术名词的解释我们可以了解到Bootstrap与element-ul的区别，在后端的开发中，我们通常注重后端的逻辑，却忽略了前端页面样式的设计，所以我们要利用强大的前端ul框架，减少前端的花费时间。Bootstrap和element-ul我都使用过，如果是像登录注册的前端页面，我推荐Bootstrap的class样式，可以让你们的登录注册变得高大上。如果是弹框或者走马灯这种简单的组件，使用element-ul可能更加方便快捷。所以说各有各的好处，看你想在什么样的场景中使用它。这里我推荐几个element-ul简单易懂的组件，可以让你的页面美观整洁。

弹框(使用场景：坦克风云游戏部署军队火力)：

<div>
        <el-dialog title="请选择武器" :visible.sync="dialogVisible">
            <el-tabs>
                <el-tab-pane label="火箭炮">
                    <el-form :model="chooseArmy" label-width="120px">
                        <el-form-item label="请选择火箭炮">
                            <el-select v-model="chooseArmy.info" placeholder="请选择火箭炮">
                                <el-option  v-for="r,i in rocketList0" :key="i" :label="armyList.find(e=>e.id==r.aid).name"  :value="r.aid+'-'+r.num">
                                    {{armyList.find(e=>e.id==r.aid).name}}--拥有:{{r.num}}
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="输入武器数量">
                            <el-input @blur="checkNum1" v-model="chooseArmy.num"></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
            <div slot="footer" class="dialog-footer">
                <span v-if="tipsVisible">数量错误</span>
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="handleOK">确 定</el-button>
            </div>
        </el-dialog>
    </div>

滑块(使用场景：坦克风云游戏生产武器)：

<div class="block">

<span class="demonstration">默认</span> <el-slider v-model="value1"></el-slider>

</div>

<script>

export default {

data() {

return {

value1: 0,

value2: 50,

value3: 36,

value4: 48,

value5: 42

}

},

methods: {

formatTooltip(val) {

return val / 100;

}

} }

</script>

走马灯(使用场景：坦克风云游戏武器轮播图)：

<template>

<el-carousel indicator-position="outside">

<el-carousel-item v-for="item in 4" :key="item">

<h3>{{ item }}</h3>

</el-carousel-item>

</el-carousel>

</template>

<style>

.el-carousel__item h3 {

color: #475669;

font-size: 18px;

opacity: 0.75;

line-height: 300px;

margin: 0;

}

.el-carousel__item:nth-child(2n) {

background-color: #99a9bf;

}

.el-carousel__item:nth-child(2n+1) {

background-color: #d3dce6;

}

</style>

indicator-position属性定义了指示器的位置。默认情况下，它会显示在走马灯内部，设置为outside则会显示在外部；设置为none则不会显示指示器。

小结

本次主要围绕element-ul的组件样式进行了拓展，包括它的背景及基本概念，与Bootstrap相比的特点。在以后的学习工作中，我们要善于运用前端样式，让我们的页面更加整洁美观。可能之后业务场景都需要好看的页面吸引人，人靠衣装，马靠鞍，只有这样我们的产品才能被大众所喜爱。我希望这次内容能让你们对前端有更深的感触，关注我下一期内容更加精彩！