Vue整合ElementUI，组件使用教程，适合新手

清疚 2022-09-03 06:26 292阅读 0赞

*  **官网：[Element][]**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70]

### 文章目录 ###

*  Vue整合ElementUI
 *  一. 按钮组件
 *  二. Link 文件链接组件
 *  三. Layout(栅格) 布局组件的使用
 *  四. Container 布局容器
 *  五. Radio 单选框
 *  六. Checkbox 多选框
 *  七. Input 输入框
 *  八. Select选择器组件

--------------------

# Vue整合ElementUI #

提示：这里我使用的Vue是2.0版本  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 1]

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

1.  下载elementui的依赖

npm i element-ui -S

1.  在src下的main.js中指定当前项目中使用elementui

import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';

1.  将elementui注册到vue实例上

Vue.use(ElementUI);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 2]

--------------------

# 一. 按钮组件 #

1.默认样式按钮
      <el-row>   
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
      </el-row>
    
    2.简洁按钮 plain 鼠标移动上去才会显示背景颜色
      <el-row>
        <el-button plain>朴素按钮</el-button>
        <el-button type="primary" plain>主要按钮</el-button>
        <el-button type="success" plain>成功按钮</el-button>
        <el-button type="info" plain>信息按钮</el-button>
        <el-button type="warning" plain>警告按钮</el-button>
        <el-button type="danger" plain>危险按钮</el-button>
      </el-row>
    
    3.使用圆角按钮 round
      <el-row>
        <el-button round>圆角按钮</el-button>
        <el-button type="primary" round>主要按钮</el-button>
        <el-button type="success" round>成功按钮</el-button>
        <el-button type="info" round>信息按钮</el-button>
        <el-button type="warning" round>警告按钮</el-button>
        <el-button type="danger" round>危险按钮</el-button>
      </el-row>
    
    4.图标按钮  idco：具体要显示的图标
      <el-row>
        <el-button icon="el-icon-search" circle></el-button>
        <el-button type="primary" icon="el-icon-edit" circle></el-button>
        <el-button type="success" icon="el-icon-check" circle></el-button>
        <el-button type="info" icon="el-icon-message" circle></el-button>
        <el-button type="warning" icon="el-icon-star-off" circle></el-button>
        <el-button type="danger" icon="el-icon-delete" circle></el-button>
      </el-row>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 3]  
**按钮组件的详细使用**

*  日后使用element ui的相关组件时需要注意的是 所有组件都是`el-组件名称`开头

创建按钮：`<el-button>默认按钮</el-button>`

**组件属性使用**

*  总结：在element中所有的组件的属性使用都是直接将`属性名=属性值方式写在对应的组件标签上`，boolean类型的属性默认为false可以简写一个属性名字表示为true。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 4]  
**示例**

<div>
          <h1>创建简单的按钮</h1>   
          <el-button>默认按钮</el-button>
    
          <h1>使用按钮的属性</h1>
          <el-button type="primary" size="mini" round="true"  loading>primary</el-button>
          <el-button type="primary" size="small" round="true" disabled>primary</el-button>
          <el-button type="primary" size="medium" circle icon="el-icon-delete-solid"></el-button>
        </div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 5]  
**按钮组的使用**

*  按钮组的使用就是通过`<el-button-group>`把多个按钮包裹起来

<el-button-group>
            <el-button type="primary" plain round icon="el-icon-back"></el-button>
            <el-button type="primary" plain round icon="el-icon-right"></el-button>
          </el-button-group>

![在这里插入图片描述][20210602112636813.png]

--------------------

# 二. Link 文件链接组件 #

文字链接组件的创建

<el-link>默认链接</el-link>

文字链接组件属性的使用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 6]  
示例

<div>
        <h1>使用文字链接组件</h1>
        <el-link type="primary" disabled icon="el-icon-eleme">默认链接</el-link>
        <el-link type="success" icon="el-icon-eleme">默认链接</el-link>
        <el-link type="warning" icon="el-icon-eleme">默认链接</el-link>
        <el-link type="info" :underline="false" icon="el-icon-eleme">默认链接</el-link>
      </div>

*  注意：有些属性需要通过Vue的绑定语法给组件赋值 `:underline="false"` 否则则会抛出异常

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 7]

# 三. Layout(栅格) 布局组件的使用 #

*  通过基础的 24 分栏，迅速简便地创建布局。`在element ui中布局组件将页面划分为多个行(row)，每行最多分为24栏(列)`

使用Layout组件

*  `el-row`代表一行，行里面放的自然就是列`el-col`，`span`代表栅格占据的列数，是`el-col`的一个属性由于它是我们elementui中的一个属性这个属性必须要求我们写数字所以赋值的时候需要带上`：`。如果span等于8表示一列占用8份如果超过8份则会换行显示。

<el-row>
    	<el-col span="8">占用8份</el-col>
    	<el-col span="8">占用8份</el-col>
    	<el-col span="8">占用8份</el-col>
    </el-row>
    
    <el-row>
          <el-col :span="6"><div style="border: 1px red solid">占用6份</div></el-col>
          <el-col :span="6"><div style="border: 1px red solid">占用6份</div></el-col>
          <el-col :span="6"><div style="border: 1px red solid">占用6份</div></el-col>
          <el-col :span="6"><div style="border: 1px red solid">占用6份</div></el-col>
        </el-row>
    
        <el-row>
          <el-col :span="7"><div style="border: 1px red solid">占用6份</div></el-col>
          <el-col :span="8"><div style="border: 1px red solid">占用6份</div></el-col>
          <el-col :span="5"><div style="border: 1px red solid">占用6份</div></el-col>
          <el-col :span="4"><div style="border: 1px red solid">占用6份</div></el-col>
        </el-row>
    
        <el-row>
          <el-col :span="3"><div style="border: 1px red solid">占用6份</div></el-col>
          <el-col :span="1"><div style="border: 1px red solid">占用6份</div></el-col>
          <el-col :span="6"><div style="border: 1px red solid">占用6份</div></el-col>
          <el-col :span="14"><div style="border: 1px red solid">占用6份</div></el-col>
     </el-row>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 8]

注意：

*  在一个布局组件好 是由`row`和`col`组合而成
 *  在使用时要区分 `row属性`和`col属性`

**行属性的使用**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 9]

<el-row :gutter="10" tag="span">
          <el-col :span="6" ><div style="border: 1px red solid">占用6份</div></el-col>
          <el-col :span="6"><div style="border: 1px red solid">占用6份</div></el-col>
          <el-col :span="6"><div style="border: 1px red solid">占用6份</div></el-col>
          <el-col :span="6"><div style="border: 1px red solid">占用6份</div></el-col>
        </el-row>

**:gutter=“10”**:表示格栅间隔  
![在这里插入图片描述][20210602165817680.png]  
**:tag=“span”**：表示当前行使用哪种标签去构建  
![在这里插入图片描述][20210602170144108.png]

**列属性的使用**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 10]  
**偏移属性offset**

<el-row>
          <el-col :span="12" offset="4"><div style="border: 1px blue solid">我是占用12份</div></el-col>
          <el-col :span="12"><div style="border: 1px blue solid">我是占用12份</div></el-col>
        </el-row>

![在这里插入图片描述][20210603091927628.png]  
**向右移动push**

<el-row>
          <el-col :span="12" push="6"><div style="border: 1px blue solid">我是占用12份</div></el-col>
          <el-col :span="12" push="0"><div style="border: 1px red solid">我是占用12份</div></el-col>
        </el-row>

![在这里插入图片描述][20210603092326785.png]

*  **注意以上两者的区别**

--------------------

# 四. Container 布局容器 #

*  用于布局的容器组件，方便快速搭建页面的基本结构。

创建一个布局容器

<el-container>
        
        </el-container>

容器中包含的子元素

<el-header>：顶栏容器。
    
    <el-aside>：侧边栏容器。
    
    <el-main>：主要区域容器。
    
    <el-footer>：底栏容器。

嵌套容器

<el-container>
          <el-header><div><h1>我是标题</h1></div></el-header>
          <el-container>
            <el-aside><div><h1>我是菜单</h1></div></el-aside>
            <el-main><div><h1>我是内容</h1></div></el-main>
          </el-container>
          <el-footer><div><h1>我是底部</h1></div></el-footer>
        </el-container>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 11]  
容器的属性

*  `注意：当子元素中没有 el-header 或 el-footer 时容器排列为水平`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 12]

--------------------

# 五. Radio 单选框 #

*  在一组备选项中进行单选

创建一个单选按钮

<el-radio >男</el-radio>
       <el-radio>女</el-radio>

![在这里插入图片描述][20210603104945385.png]

*  此时虽然创建出来两个单选按钮但是不能进行选中和取消，这里必须配合我们的`value / v-model`和`label`属性进行使用。

<template>
        <div>
          <h1>radio组件的使用</h1>
          
          <el-radio v-model="label" label="男">男</el-radio>
          <el-radio v-model="label" label="女">女</el-radio>
        </div>
    </template>
    
    <script>
        export default {
          
            name: "Radio",
            data(){
          
              return{
          
                label:'女'
              }
           }
        }
    </script>

![在这里插入图片描述][20210603105424770.png]  
Radio按钮属性的使用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 13]

<el-radio v-model="label" name="sex" disabled label="男">男</el-radio>
       <el-radio v-model="label" name="sex" label="女">女</el-radio>

*  总结：属性的使用还是直接写在对应的组件标签上以 `属性名 = 属性值` 的方式使用。

Radio事件的使用

![在这里插入图片描述][20210603141657375.png]

1.  事件的使用也和属性的使用是一致的都是写在对应的组件标签上
2.  事件在使用时必须使用vue中绑定事件方式进行使用如`@事件名=事件处理函数(绑定在vue组组件中对应函数)`

<el-radio v-model="label" @change="aa" name="sex" label="男">男</el-radio>
          <el-radio v-model="label" @change="aa" name="sex" label="女">女</el-radio>
    
    <script>
        export default {
          
            methods:{
          
                aa(){
          
                  console.log(this.label)
                }
            }
        }
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 14]  
Radio单选按钮组的使用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 15]

<el-radio-group v-model="radio">
            <el-radio label="3">备选项3</el-radio>
            <el-radio label="6">备选项6</el-radio>
            <el-radio label="9">备选项9</el-radio>
        </el-radio-group>
        
        <script>
        export default {
          
            data(){
          
              return{
          
                radio: '3'
              }
           },
    
            methods:{
          
                bb(){
          
                  console.log(this.radio)
                }
            }
        }
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 16]

--------------------

# 六. Checkbox 多选框 #

*  一组备选项中进行多选

创建Checkbox

<el-checkbox>北京</el-checkbox>

*  使用`<el-checkbox>`标签去构建我们的checkbox日后我们checkbox的值可以通过v-model进行绑定(true|false)。

属性和事件的使用

<el-checkbox v-model="checked" @change="aa" :true-label=1>北京</el-checkbox>
          <el-checkbox v-model="checked" @change="aa" :true-label=2>洛阳</el-checkbox>
          <el-checkbox v-model="checked" @change="aa" :true-label=3>上海</el-checkbox>
          <el-checkbox v-model="checked" @change="aa" :true-label=4>曹县</el-checkbox>
          
          <script>
        export default {
          
            name: "Checkbox",
            data(){
          
              return{
          
                checked:1
              }
            },
            methods:{
          
              aa(){
          
                console.log("选中节点的true-label为："+this.checked)
              }
            }
        }
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 17]  
复选框组的使用

*  适用于多个复选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。

<el-checkbox-group v-model="checkList" @change="aa" :max="2">
          <el-checkbox :label=1>北京</el-checkbox>
          <el-checkbox :label=2>洛阳</el-checkbox>
          <el-checkbox :label=3>上海</el-checkbox>
          <el-checkbox :label=4>曹县</el-checkbox>
     </el-checkbox-group>
     
    <script>
        export default {
          
            name: "Checkbox",
            data(){
          
              return{
          
                checkList:[]
              }
            },
            methods:{
          
              aa(){
          
                console.log("选中节点的true-label为："+this.checkList)
              }
            }
        }
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 18]

--------------------

# 七. Input 输入框 #

*  通过鼠标或键盘输入字符

创建

<el-input> </el-input>

Input属性的使用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 19]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 20]

<el-input type="textarea" v-model="name" disabled show-password></el-input>
        <el-input type="textarea" show-word-limit textarea :maxlength="10000" v-model="age"></el-input>
        <el-input type="text" prefix-icon="el-icon-user" placeholder="请输入用户名" v-model="userName"></el-input>
        <el-input type="text" prefix-icon="el-icon-paperclip"></el-input>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 21]  
事件的使用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 22]

<el-input v-model="userSex" @input="ccc"></el-input>
       
        <script>
        export default {
          
            name: "Input",
            methods:{
          
                ccc(value){
          
                  console.log(value)
                },
            }
        }
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 23]  
方法的使用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 24]

<el-button @click="focusInputs">focus方法</el-button>
    
     <script>
        export default {
          
            methods:{
          
                focusInputs(){
          
                  this.$refs.inputs.select();
              }
            }
        }
    </script>

![在这里插入图片描述][20210604113217676.png]

总结：

*  在使用组件的方法时需要在对应的组件中加入 `ref="组件别名"`
 *  在调用方法时直接使用 `this.$refs.组件别名.方法名()`

> 注意：在elementui中所有组件 都存在 属性和方法  
> 属性：直接写在对应的组件标签上 使用方式：`属性名=属性值 方式`  
> 事件：直接使用vue绑定事件方式写在对应的组件标签上 使用方式：`@事件名=vue中事件处理函数`  
> 方法：1.在对应组件标签上使用 `ref=组件别名` 2.`通过使用this.$refs.组件别名.方法名()` 进行调用。

--------------------

# 八. Select选择器组件 #

*  当选项过多时，使用下拉菜单展示并选择内容。

选择器组件的使用

1.  数据写死在页面上

<el-select v-model="cityName">
            <el-option value="北京">北京</el-option>
            <el-option value="北京">上海</el-option>
            <el-option value="北京">澳门</el-option>
            <el-option value="北京">曹县</el-option>
          </el-select>

*  注意：要求下拉列表中必须存在`option`的`value`属性值，`select`中必须使用`v-modek`进行数据绑定  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70_pic_center]

1.  如何动态获取数据

<el-select v-model="cityId">
            <el-option v-for="options in options" :label="options.name" :value="options.id" :key="options.id"></el-option>
          </el-select>
          
          <script>
        export default {
          
            data(){
          
              return{
          
                cityId:'',
                
                options:[
                  {
          id:'1',name:'研发部'},
                  {
          id:'2',name:'开发部'},
                  {
          id:'3',name:'小卖部'},
                  {
          id:'4',name:'销售部'},
                ]
              }
            },
        }
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 25]

事件与属性的使用

<el-select v-model="cityId" @change="aa" multiple clearable>
            <el-option v-for="options in options" :label="options.name" :value="options.id" :key="options.id"></el-option>
          </el-select>
          
          <script>
        export default {
          
            name: "Select",
            data(){
          
              return{
          
                cityId:'',
                options:[
                  {
          id:'1',name:'研发部'},
                  {
          id:'2',name:'开发部'},
                  {
          id:'3',name:'小卖部'},
                  {
          id:'4',name:'销售部'},
                ]
              }
            },
    
            methods:{
          
              aa(value){
          
                console.log(value)
              }
            }
    
        }
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 26]  
方法的使用

<el-select v-model="city" ref="selects">
            <el-option v-for="options in options" :label="options.name" :value="options.id" :key="options.id"></el-option>
          </el-select>
          <el-button @click="bbb">测试方法</el-button>
          
          <script>
        export default {
          
            name: "Select",
            data(){
          
              return{
          
                city:'',
    
                options:[
                  {
          id:'1',name:'研发部'},
                  {
          id:'2',name:'开发部'},
                  {
          id:'3',name:'小卖部'},
                  {
          id:'4',name:'销售部'},
                ]
              }
            },
    
            methods:{
          
              bbb(){
          
                this.$refs.selects.focus();
              }
            }
    
        }
    </script>

![在这里插入图片描述][20210604145605557.png]

--------------------

**剩下的组件大家可以下去自行练习！感谢观看！** ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 27]

[Element]: https://element.eleme.cn/#/zh-CN/component/installation
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70]: /images/20220829/fee431a8253c421c960682c3442ece31.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 1]: /images/20220829/f605e69508ba48eab4b47f76fe084f87.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 2]: /images/20220829/984f02f83b4f40998e8640712a626591.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 3]: /images/20220829/1e597fd74db741d1a92187bb33d64d43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 4]: /images/20220829/17f9df96747d4251856a777bb97d5727.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 5]: /images/20220829/f6d800b478474fb3b454215ef68f0ac5.png
[20210602112636813.png]: /images/20220829/30f8277f240a4ff19c87e4c79735e577.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 6]: /images/20220829/032622542df741af8de11f843e3fcf2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 7]: /images/20220829/3bebed6a80c149f687a158af5304d4af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 8]: /images/20220829/a0c9548a37a04596a98a17d7dfb9deed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 9]: /images/20220829/851da8a9bc214b1085550aeaa4328929.png
[20210602165817680.png]: /images/20220829/b96811789a8444e3875d95d802bfdf51.png
[20210602170144108.png]: /images/20220829/8cab16ce993046858ebb3f27e74ddd02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 10]: /images/20220829/9bdf3fe50fea4297bee6a6225be68d87.png
[20210603091927628.png]: /images/20220829/cdacb47e77ca44c283799bbe6523a715.png
[20210603092326785.png]: /images/20220829/8d54f9d4cd41499dab2512428df2894e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 11]: /images/20220829/74c4655f6fdc4b1fb572031c4bc19d37.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 12]: /images/20220829/438d60eb0da54908b6131dd13626c75a.png
[20210603104945385.png]: /images/20220829/db266ab666184470aed777dc073f6043.png
[20210603105424770.png]: /images/20220829/c3466d6d1a10438ea24555d397581beb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 13]: /images/20220829/b559f9b40345467cbc8d7578eafe35a4.png
[20210603141657375.png]: /images/20220829/9c0df6af5c3f44b39bb1d0583326ea23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 14]: /images/20220829/d954400e69da4dc78d9f98b41d35975d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 15]: /images/20220829/2c11b5e035744af1ab69e60cf8c179b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 16]: /images/20220829/06449e0f9a964ac39db41307ad898564.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 17]: /images/20220829/9d0848ae31d64647b52bd6e2fec80e44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 18]: /images/20220829/357eee88fdff4aaa98d6463cab6d7dd9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 19]: /images/20220829/c03751dcf1cd429a9fc007e135fc0dea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 20]: /images/20220829/98babad98dd641ecb05a31d20ccff3c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 21]: /images/20220829/62e1eb75f6054eeea64bbac8c4e10768.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 22]: /images/20220829/0bc898c7d5424abfad9a7338ebc04e4f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 23]: /images/20220829/396e2f0b8ea846fc89e219b64320c42f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 24]: /images/20220829/133280a96683481eb22bb304e61ddc96.png
[20210604113217676.png]: /images/20220829/1b1d65a90eed42bd95557ba63a63ef16.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20220829/ce99cbb2db0341c6bc5e445a233e38db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 25]: /images/20220829/7ef50cd287184723a3de47caf7a91941.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 26]: /images/20220829/7571c6f5470d4794ac90adae5420647a.png
[20210604145605557.png]: /images/20220829/55be70e722d941d5bf12e661a0c9e251.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 27]: /images/20220829/3fc65503ccef4c8f98f3434a56a406ce.png