element组件与动画使用-阿里云开发者社区

element组件与动画使用

2021-12-07 454

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 1.什么是ElementElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，封装很多常用组件，官网是element.eleme.cn/#/zh-CN/com…，下面就简单介绍 element。

本教程为入门教程，如有错误，请各位前端大佬指出。

1.什么是Element

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，封装很多常用组件，官网是element.eleme.cn/#/zh-CN/com…，下面就简单介绍 element。

当你访问官网，发现无数已经封装好了的页面，而且样式多样，一般可以满足大部分的业务需求，如果你是业务开发，直接复制粘贴，然后在复制好的代码上补充字段也填写业务即可了。

1.安装和引入

如果想使用Element，那么需要下载和安装element-ui的类库，否则会抛出异常。

1. npm i element-ui -S
2. npm install babel-plugin-component -D
3. 复制代码

然后，将.babelrc文件修改为：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node", [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]]
    }
  }
}
复制代码

2.使用

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容，证明你想使用引入的组件：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//element组件相关配置
import { Button, Select, Option } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Button)
Vue.use(Select)
Vue.use(Option)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})
复制代码

然后将代码直接复制过来，将字段对应同时加入业务即可。

<template>
<el-select v-model="value" filterable placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
<script>
export default {
name: 'HelloWorld2',
data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
}
</script>
复制代码

通过element，我们就不用自己编写页面了，大大减少了工作量，同时方式也比较不错。上文仅仅使用按钮作为演示，其他组件请自行测试。

2.动画

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果，在此过程中，就会形成动画。动画使用包括以下工具：

在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js

下面简单做一下动画的实例

1.隐藏显示

点击一次字体隐藏，再次点击字体显示，以下附上代码。

app.vue
<template>
  <div id="app">
    <anim/>
  </div>
</template>
<script>
import anim from './components/anim.vue'
export default {
  name: 'App',
  components:{
   anim
  },
  data () {
  return {
 }
},
  methods: {
   clickButton(event){
     if(this.stutas ==HelloWorld){
         this.stutas = HelloWorld2
     }else{
         this.stutas = HelloWorld
     }
   }
},
}
</script>
<style>
</style>
Anim.vue
<template>
<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <!-- 动画必备 -->
  <transition name="demo">
    <p v-if="show">hello</p>
  </transition>
</div>
</template>
<script>
export default {
name: 'anim',
data () {
  return {
    show: true
}
},
methods: {
    clickButton(){
    }
}
}
</script>
<style>
.demo-enter-active, .demo-leave-active {
  transition: opacity 5s;
}
.demo-enter, .demo-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
复制代码

2.移动

点击一次字体右移，再次点击字体左移。下文附上代码。

<template>
<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <!-- 动画必备 -->
  <transition name="demo">
    <p class = "myDemo" v-if="show">hello</p>
  </transition>
</div>
</template>
<script>
export default {
name: 'anim',
data () {
  return {
    show: true
}
},
methods: {
    clickButton(){
    }
}
}
</script>
<style>
.demo-enter-active, .demo-leave-active {
    transition: all .5s ease;
}
.demo-enter, .demo-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: translateX(100px);;
}
.demo-enter-to, .demo-leave /* .fade-leave-active below version 2.1.8 */ {
  transform: translateX(0px);;
}
.myDemo{
  position:absolute;
  left:50px
}
</style>
复制代码

在进入/离开的过渡中，会有 6 个 class 切换。

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

3.使用第三方库

这里推荐的第三方库为Animate。首页： daneden.github.io/animate.css…。 Animate.css是一个随时可用的跨浏览器动画库，可用于您的 Web 项目。非常适合强调、主页、滑块和注意力引导提示。下文将简单介绍animate.css的基础用法。

1.index.html引入组件

相同道里，需要引入组件才能使用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    <title>project</title>
</head>
<body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
</body>
</html>
复制代码

2.引入div

然后获取官网文档的样式，直接使用即可。

<template>
<div id="example-3">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated zoomOutRight"
    leave-active-class="animated fadeInDownBig"
  >
    <p v-if="show">hello</p>
  </transition>
</div>
</template>
<script>
export default {
name: 'anim',
data () {
  return {
    show: true
}
},
methods: {
}
}
</script>
<style>
</style>
复制代码

如有其他需要也可以参考文档：animate.style/#documentat…