VUE 图标管理

最新推荐文章于 2024-07-13 10:40:17 发布
最新推荐文章于 2024-07-13 10:40:17 发布
阅读量1k 收藏
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yelin042/article/details/110203023
版权 
<template>
  <div>
    <Card>
      <tables
        ref="tables"
        editable
        searchable
        :border="false"
        size="small"
        search-place="top"
        v-model="stores.icon.data"
        :totalCount="stores.icon.query.totalCount"
        :columns="stores.icon.columns"
        @on-delete="handleDelete"
        @on-edit="handleEdit"
        @on-select="handleSelect"
        @on-selection-change="handleSelectionChange"
        @on-refresh="handleRefresh"
        :row-class-name="rowClsRender"
        @on-page-change="handlePageChanged"
        @on-page-size-change="handlePageSizeChanged"
      >
        <div slot="search">
          <section class="dnc-toolbar-wrap">
            <Row :gutter="16">
              <Col span="16">
                <Form inline @submit.native.prevent>
               
                  <FormItem>
                    <Input
                      type="text"
                      search
                      :clearable="true"
                      v-model="stores.icon.query.kw"
                      placeholder="输入关键字搜索..."
                      @on-search="handleSearchIcon()"
                    >
                     

                      <Select
                        slot="prepend"
                        v-model="stores.icon.query.isDeleted"
                        @on-change="handleSearchIcon"
                        placeholder="删除状态"
                        style="width:60px;"
                      >
                        <Option
                          v-for="item in stores.icon.sources.isDeletedSources"
                          :value="item.value"
                          :key="item.value"
                        >{{item.text}}</Option>
                      </Select>
                      <Select
                        slot="prepend"
                        v-model="stores.icon.query.status"
                        @on-change="handleSearchIcon"
                        placeholder="图标状态"
                        style="width:60px;"
                      >
                        <Option
                          v-for="item in stores.icon.sources.statusSources"
                          :value="item.value"
                          :key="item.value"
                        >{{item.text}}</Option>
                      </Select>
                    </Input>
                  </FormItem>
                  <FormItem>
                     <Button class="search-btn" type="primary" @click="handleSearchIcon()"><Icon type="search"/>&nbsp;&nbsp;搜索</Button>
                </FormItem>
                 <FormItem>
                       <Button class="search-btn" type="warning" @click="clearFormWindow()"><Icon type="search"/>&nbsp;&nbsp;清空</Button>
                </FormItem>
                </Form>
              </Col>
              <Col span="8" class="dnc-toolbar-btns">
                <ButtonGroup class="mr3">
                  <Button
                    class="txt-danger"
                    icon="md-trash"
                    title="删除"
                    @click="handleBatchCommand('delete')"
                  ></Button>
                  <Button
                    class="txt-success"
                    icon="md-redo"
                    title="恢复"
                    @click="handleBatchCommand('recover')"
                  ></Button>
                  <Button
                    class="txt-danger"
                    icon="md-hand"
                    title="禁用"
                    @click="handleBatchCommand('forbidden')"
                  ></Button>
                  <Button
                    class="txt-success"
                    icon="md-checkmark"
                    title="启用"
                    @click="handleBatchCommand('normal')"
                  ></Button>
                  <Button icon="md-refresh" title="刷新" @click="handleRefresh"></Button>
                </ButtonGroup>
                <Button
                  icon="md-create"
                  type="primary"
                  @click="handleShowCreateWindow"
                  title="新增图标"
                >新增图标</Button>
              </Col>
            </Row>
          </section>
        </div>
      </tables>
    </Card>
    <Drawer
      :title="formTitle"
      v-model="formModel.opened"
      width="400"
      :mask-closable="false"
      :mask="false"
      :styles="styles"
    >
      <Form :model="formModel.fields" ref="formIcon" :rules="formModel.rules">
        <FormItem label="图标名称" prop="DncCode" label-position="left">
          <Input v-model="formModel.fields.DncCode" placeholder="请输入图标名称"/>
        </FormItem>
        <FormItem label="自定义图标" label-position="top">
          <Input v-model="formModel.fields.DncCustom" placeholder="请输入自定义图标"/>
        </FormItem>
        <Row :gutter="8">
          <Col span="12">
            <FormItem label="图标状态" label-position="left">
              <i-switch
                size="large"
                v-model="formModel.fields.DncStatus"
                :true-value="1"
                :false-value="0"
              >
                <span slot="open">正常</span>
                <span slot="close">禁用</span>
              </i-switch>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="图标大小" label-position="left">
              <InputNumber v-model="formModel.fields.DncSize" placeholder="图标大小"></InputNumber>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="8">
          <Col span="12">
            <FormItem label="图标颜色" label-position="top">
              <ColorPicker v-model="formModel.fields.DncColor" placeholder="图标颜色"/>
            </FormItem>
          </Col>
        </Row>
        <FormItem label="备注" label-position="top">
          <Input
            type="textarea"
            v-model="formModel.fields.DncDescription"
            :rows="4"
            placeholder="图标备注信息"
          />
        </FormItem>
      </Form>
      <div class="demo-drawer-footer">
        <Button icon="md-checkmark-circle" type="primary" @click="handleSubmitIcon">保 存</Button>
        <Button style="margin-left: 8px" icon="md-close" @click="formModel.opened = false">取 消</Button>
        <Button
          style="margin-left: 8px"
          icon="md-arrow-up"
          @click="handleOpenBatchImportDrawer"
        >批量导入</Button>
      </div>
    </Drawer>
    <Drawer
      title="批量导入图标"
      v-model="formModel.batchImport.opened"
      width="360"
      :mask-closable="false"
    >
      <Form>
        <FormItem label="批量图标" label-position="top">
          <Input
            type="textarea"
            v-model="formModel.batchImport.icons"
            :rows="16"
            placeholder="以回车分隔,每行一个图标名称"
          />
        </FormItem>
      </Form>
      <div class="demo-drawer-footer">
        <Button icon="md-checkmark-circle" type="primary" @click="handleBatchSubmitIcon">保 存</Button>
        <Button
          style="margin-left: 8px"
          icon="md-close"
          @click="formModel.batchImport.opened = false"
        >取 消</Button>
      </div>
    </Drawer>
  </div>
</template>

<script>
import Tables from "_c/tables";
import {
  getIconList,
  createIcon,
  loadIcon,
  editIcon,
  deleteIcon,
  batchCommand,
  batchImportIcon
} from "@/api/rbac/icon";
export default {
  name: "rbac_icon_page",
  components: {
    Tables
  },
  data() {
    return {
      commands: {
        delete: { name: "delete", title: "删除" },
        recover: { name: "recover", title: "恢复" },
        forbidden: { name: "forbidden", title: "禁用" },
        normal: { name: "normal", title: "启用" }
      },
      formModel: {
        opened: false,
        title: "创建图标",
        mode: "create",
        selection: [],
        fields: {
          id: 0,
          code: "",
          size: 24,
          color: "",
          custom: "",
          isLocked: 0,
          status: 1,
          isDeleted: 0,
          description: ""
        },
        rules: {
          code: [
            {
              type: "string",
              required: true,
              message: "请输入图标名称",
              min: 2
            }
          ]
        },
        batchImport: {
          opened: false,
          icons: ""
        }
      },
      stores: {
        icon: {
          query: {
            totalCount: 0,
            pageSize: 20,
            currentPage: 1,
            kw: "",
            isDeleted: 0,
            status: -1,
            sort: [
              {
                direct: "DESC",
                field: "id"
              }
            ]
          },
          sources: {
            isDeletedSources: [
              { value: -1, text: "全部" },
              { value: 0, text: "正常" },
              { value: 1, text: "已删" }
            ],
            statusSources: [
              { value: -1, text: "全部" },
              { value: 0, text: "禁用" },
              { value: 1, text: "正常" }
            ],
            statusFormSources: [
              { value: 0, text: "禁用" },
              { value: 1, text: "正常" }
            ]
          },
          columns: [
            { type: "selection", width: 30, key: "handle" },
            {
              title: "图标",
              key: "code",
              width: 80,
              align: "center",
              render: (h, params) => {
                return h("Icon", {
                  props: {
                    type: params.row.code,
                    size: 24,
                    color: params.row.color
                  }
                });
              }
            },
            { title: "图标名称", key: "code", width: 250, sortable: true },
            { title: "自定义", key: "custom", width: 150 },
            { title: "大小", key: "size", width: 60 },
            { title: "颜色", key: "color", width: 80 },
            {
              title: "状态",
              key: "status",
              align: "center",
              width: 120,
              render: (h, params) => {
                let status = params.row.status;
                let statusColor = "";
                let statusText = "";
                switch (status) {
                  case "0":
                    statusText = "禁用";
                    statusColor = "default";
                    break;
                    case "1":
                    statusText = "正常";
                    statusColor = "success";
                    break;
                    case "-1":
                    statusText = "-";
                    statusColor = "default";
                    break;
                }
                return h(
                  "Tooltip",
                  {
                    props: {
                      placement: "top",
                      transfer: true,
                      delay: 500
                    }
                  },
                  [
                    //这个中括号表示是Tooltip标签的子标签
                    h(
                      "Tag",
                      {
                        props: {
                          //type: "dot",
                          color: statusColor
                        }
                      },
                      statusText
                    ), //表格列显示文字
                    h(
                      "p",
                      {
                        slot: "content",
                        style: {
                          whiteSpace: "normal"
                        }
                      },
                      statusText //整个的信息即气泡内文字
                    )
                  ]
                );
              }
            },
            {
              title: "创建时间",
              width: 90,
              ellipsis: true,
              tooltip: true,
              key: "createdOn"
            },
            {
              title: "创建者",
              key: "createdByUserName",
              ellipsis: true,
              tooltip: true
            },
            {
              title: "操作",
              align: "center",
              key: "handle",
              width: 150,
              className: "table-command-column",
              options: ["edit"],
              button: [
                (h, params, vm) => {
                  return h(
                    "Poptip",
                    {
                      props: {
                        confirm: true,
                        title: "你确定要删除吗?"
                      },
                      on: {
                        "on-ok": () => {
                          vm.$emit("on-delete", params);
                        }
                      }
                    },
                    [
                      h(
                        "Tooltip",
                        {
                          props: {
                            placement: "left",
                            transfer: true,
                            delay: 1000
                          }
                        },
                        [
                          h("Button", {
                            props: {
                              shape: "circle",
                              size: "small",
                              icon: "md-trash",
                              type: "error"
                            }
                          }),
                          h(
                            "p",
                            {
                              slot: "content",
                              style: {
                                whiteSpace: "normal"
                              }
                            },
                            "删除"
                          )
                        ]
                      )
                    ]
                  );
                },
                (h, params, vm) => {
                  return h(
                    "Tooltip",
                    {
                      props: {
                        placement: "left",
                        transfer: true,
                        delay: 1000
                      }
                    },
                    [
                      h("Button", {
                        props: {
                          shape: "circle",
                          size: "small",
                          icon: "md-create",
                          type: "primary"
                        },
                        on: {
                          click: () => {
                            vm.$emit("on-edit", params);
                            vm.$emit("input", params.tableData);
                          }
                        }
                      }),
                      h(
                        "p",
                        {
                          slot: "content",
                          style: {
                            whiteSpace: "normal"
                          }
                        },
                        "编辑"
                      )
                    ]
                  );
                }
              ]
            }
          ],
          data: []
        }
      },
      styles: {
        height: "calc(100% - 55px)",
        overflow: "auto",
        paddingBottom: "53px",
        position: "static"
      }
    };
  },
  computed: {
    formTitle() {
      if (this.formModel.mode === "create") {
        return "创建图标";
      }
      if (this.formModel.mode === "edit") {
        return "编辑图标";
      }
      return "";
    },
    selectedRows() {
      return this.formModel.selection;
    },
    selectedRowsId() {
      return this.formModel.selection.map(x => x.id);
    }
  },
  methods: {
    loadIconList() {
      getIconList(this.stores.icon.query).then(res => {
        this.stores.icon.data = res.data.data;
        this.stores.icon.query.totalCount = res.data.totalCount;
        this.stores.icon.query.currentPage=1;
      });
    },
    clearFormWindow()
    {
       this.stores.icon.query.kw="";
       this.stores.icon.query.status=-1;
       this.stores.icon.query.isDeleted=-1;
        this.loadIconList();
    },
    handleOpenFormWindow() {
      this.formModel.opened = true;
    },
    handleCloseFormWindow() {
      this.formModel.opened = false;
    },
    handleSwitchFormModeToCreate() {
      this.formModel.mode = "create";
    },
    handleSwitchFormModeToEdit() {
      this.formModel.mode = "edit";
      this.handleOpenFormWindow();
    },
    handleEdit(params) {
      this.handleSwitchFormModeToEdit();
      this.handleResetFormIcon();
      this.doLoadIcon(params.row.id);
    },
    handleSelect(selection, row) {},
    handleSelectionChange(selection) {
      this.formModel.selection = selection;
    },
    handleRefresh() {
      this.loadIconList();
    },
    handleShowCreateWindow() {
      this.handleSwitchFormModeToCreate();
      this.handleOpenFormWindow();
      this.handleResetFormIcon();
    },
    handleSubmitIcon() {
      
      let valid = this.validateIconForm();
      //this.$Message.warning("请选择至少一条数据"+valid+"---"+this.formModel.mode);
      if (valid) {
       // this.$Message.warning("create--"+valid+"---"+this.formModel.mode);
        if (this.formModel.mode == "create") {
          this.doCreateIcon();
           
        }
        if (this.formModel.mode == "edit") {
          this.doEditIcon();
        }
      }
    },
    handleResetFormIcon() {
      this.$refs["formIcon"].resetFields();
    },
    doCreateIcon() {
      createIcon(this.formModel.fields).then(res => {
        if (res.data.code === 200) {
          this.$Message.success(res.data.message);
          this.loadIconList();
          this.handleCloseFormWindow();
        } else {
          this.$Message.warning(res.data.message);
        }
      });
    },
    doEditIcon() {
      editIcon(this.formModel.fields).then(res => {
        if (res.data.code === 200) {
          this.$Message.success(res.data.message);
          this.loadIconList();
          this.handleCloseFormWindow();
        } else {
          this.$Message.warning(res.data.message);
        }
      });
    },
    validateIconForm() {
      let _validflag = false;
      //console.log(this.$refs["formIcon"])
      /* this.$refs["formIcon"].validate(valid => {
        if (!valid) {
          this.$Message.error("请完善表单信息");
          _validflag = false;
       
        } else {
          _validflag = true;
          console.log("valid true")
        
        }
      }); */
      //console.log("valid"+_validflag)
      if(this.formModel.fields.code!="")
       _validflag = true;
      else
      {

         _validflag = false;
       this.$Message.error("请完善表单信息");
      }
      return _validflag;
    },
    doLoadIcon(id) {
      loadIcon({ id: id }).then(res => {
        this.formModel.fields = res.data.data[0];
      });
    },
    handleDelete(params) {
      this.doDelete(params.row.id);
    },
    doDelete(ids) {
      if (!ids) {
        this.$Message.warning("请选择至少一条数据");
        return;
      }
      deleteIcon(ids).then(res => {
        if (res.data.code === 200) {
          this.$Message.success(res.data.message);
          this.loadIconList();
        } else {
          this.$Message.warning(res.data.message);
        }
      });
    },
    handleBatchCommand(command) {
      if (!this.selectedRowsId || this.selectedRowsId.length <= 0) {
        this.$Message.warning("请选择至少一条数据!");
        return;
      }
      this.$Modal.confirm({
        title: "操作提示",
        content:
          "<p>确定要执行当前 [" +
          this.commands[command].title +
          "] 操作吗?</p>",
        loading: true,
        onOk: () => {
          this.doBatchCommand(command);
        }
      });
    },
    doBatchCommand(command) {
      batchCommand({
        command: command,
        ids: this.selectedRowsId.join(",")
      }).then(res => {
        if (res.data.code === 200) {
          this.$Message.success(res.data.message);
          this.handleCloseFormWindow();
          this.formModel.batchImport.opened = false;
          this.loadIconList();
          this.formModel.selection=[];
        } else {
          this.$Message.warning(res.data.message);
        }
        this.$Modal.remove();
      });
    },
    handleSearchIcon() {
      this.loadIconList();
    },
    rowClsRender(row, index) {
      if (row.isDeleted) {
        return "table-row-disabled";
      }
      return "";
    },
    handleOpenBatchImportDrawer() {
      this.formModel.batchImport.opened = true;
    },
    handleBatchSubmitIcon() {
      var data = { icons: this.formModel.batchImport.icons };
      batchImportIcon(data).then(res => {
        if (res.data.code === 200) {
          this.$Message.success(res.data.message);
          this.handleCloseFormWindow();
          this.formModel.batchImport.opened = false;
          this.loadIconList();
        } else {
          this.$Message.warning(res.data.message);
        }
      });
    },
    handlePageChanged(page) {
      this.stores.icon.query.currentPage = page;
      this.loadIconList();
    },
    handlePageSizeChanged(pageSize) {
      this.stores.icon.query.pageSize = pageSize;
      this.loadIconList();
    }
  },
  mounted() {
    this.loadIconList();
  }
};
</script>

东边的小山
关注
专栏目录
vue 2.x项目图标管理（选型，优化）
weixin_44494811的博客
07-01 426
1.问题：前端项目小图标如何处理才是最优解？           我们都知道web项目图标可以是png,jpg等形式，我们前端人员可以用设计图上面下载这几种格式。那我们的项目应该采取什么格式的图片比较好呢，那就要比较这几种图片展示形式的优缺点。           图片格式优缺点：https://blog.cs
vue底部图标和页面切换
05-30
安装Vue.js通常通过npm（Node.js包管理器）进行： ```bash npm install vue ``` 接着，安装Mint UI： ```bash npm install mint-ui --save ``` 导入Mint UI的样式文件，一般在`main.js`文件中添加： ```...
vue组件库（五）：icon管理
weixin_30663471的博客
01-16 148
图标管理 前言 一、常用图标库网站 1.http://icomoon.io　　阿里巴巴矢量图 身边的 2.http://fontawesome.dashgame.com　　iconmoon 3.http://www.iconfont.cn　　Font Awesome 2.http://icomoon.io，使用该网站集中管理图标库 其实，之前使用的是阿里的iconf...
如何在 Vue 项目中优雅地使用图标
最新发布
代码怪兽的技术博客
07-13 905
如何在 Vue 项目中方便易用、自动剪枝、可自定义地使用各种图标库（Material Symbols/ Material Icons），本文提供了一个实用流程。
【Vue 开发实战】实战篇 # 41：如何管理系统中使用的图标
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
09-27 366
/ 使用 vue-svg-loader 时 Logo 是函数式组件。// 没有使用 vue-svg-loader 时 logo 是路径。效果如下，使用起来都是比较方便的，都是转为了 svg 元素。【Vue 开发实战】学习笔记。在 404 页面里面引入图标。
Vue 自定义图标
码小哥的专栏
01-23 1885
Vue 自定义图标 因为elementUI提供的icon有很大的局限性，想要放自己定义的图标，需要繁琐的引入并用img标签展示。不能像ElementUI 引入图标那样，支持类似字体的修改样式，大小和颜色。 所以，思考再三，决定简单的介绍下怎么自定义图标。 首先打开阿里巴巴矢量图标库 选择其中一个图标，添加入库，如图 打开右上角，购物车，弹窗，点击添加至项目 确定之后，如图 下载至本地，文件目录 目录包含Demo介绍，在vue项目中，将该解压后的文件放置 根目录下，public文件夹下，或者static文件
【Vue】icon图标使用
qq_58137891的博客
04-29 314
基于Vue和Element UI的图标选择器组件设计源码 - e-icon-picker
05-29
本源码提供了一个基于Vue和Element UI的图标选择器组件的设计。项目包含120个文件，其中包括48个...该组件允许用户在Element UI和Font Awesome图标之间进行选择，为开发者提供了一个便捷的工具来管理和使用图标资源。
如何在Vue.JS中使用图标组件
10-15
这种方式减少了全局状态的依赖，但需要在每个组件中管理图标数据，增加了代码量。 3. 每个组件代表一个图标，如`<icon-flag>`、`<icon-star>`： 这种方式通过为每个图标创建单独的组件来实现，每个组件都由一个图标...
基于Vue的信息管理系统
06-20
头部 mint-ui Mint UI 底部 MUI Hello mui 轮播图 mint-ui (Swipe) 九宫格 MUI (background-repeat: round;...加载提示框，支持自定义文本和加载图标。 Loadmore 下拉/上拉刷新，支持自定义 HTML 模板。
vue使用自定义icon图标的方法
12-11
推荐使用阿里爸爸矢量图标管理，iconfont 使用方法 登录账号，找到需要的图标加入购物车 然后添加到项目  再然后下载代码到本地 下载代码文件然后解压出现这列表 打开HTML文件，引用方法教程 补充我人的坑，...
vue-图标的使用
qq_42259086的博客
12-29 677
使用icon图标主要是两种 1、组件中的图标，以eleementui为例，全局安装饿了么 选好图标后，复制图标下代码，直接在.vue中写入““，即可显示，可在第二种，是下载到本地，会下载下来一个压缩包，解压后发现文件夹有一堆文件，在项目的common部分新建个文件夹，用于存放这些文件，选取其中的 ，即可直接引用，在向项目中添加图标时，只需更新此类文件即可。 ...
Vue设置浏览器小图标（ICON）
Sophia的博客
11-03 8116
Vue设置浏览器小图标及静态标题
vue实战——图标，请使用SVG！（含插件vue-svg-icon的使用）
朝阳39的博客
09-26 3074
为什么推荐svg图标？ 缺图标时，通常我们都会选择阿里图标库 https://www.iconfont.cn/ 为了避免不断变更的图标需求，导致反复更新图标地址或重新下载整个项目的图标，推荐将图标下载到本地。 与png格式相比，svg格式有以下优点： 同尺寸的图标，svg所占空间更小 SVG是矢量图文件，可以随意改变大小，同时不影响图标质量。 svg图标既可以通过.svg文件引入html中，也可以直接使用svg代码渲染（svg代码还可以便捷修改成任意想要的效果） 可以用CSS样式自由.
vue项目中使用自定义Icon图标
qq_51554230的博客
03-28 2751
在vue项目引入阿里巴巴矢量库中的图标
vue项目中自定义icon图标
程序员一枚，仅记录工作中的难点
03-31 2651
vue项目中自定义icon图标
vue2&3自定义svg图标组件
pscool的博客
03-21 5637
可参考： 未来必热：SVG Sprites技术介绍 懒人神器：svg-sprite-loader实现自己的Icon组件 在Vue3项目中使用svg-sprite-loader
vue element自定义图标-iconfont图标的使用
fatfish517的博客
03-28 4960
vue element自定义图标-iconfont图标的使用 阿里图标的使用
Vue使用阿里iconfont图标
提笔忘字的帝国
06-27 2564
目录​编辑 前言正篇一、在官网下载icon图标二、Vue添加iconfont 三、测试图标效果大家好，我是爷爷的茶七里香，最近自己想搞一个网站，感觉网站有点单一，我就给项目加了阿里的iconfont图标，感觉挺好用的，还是彩色的，顺便记录下。项目下载下来解压之后的文件如下： 效果：......
vue后台管理系统图标
04-28
Vue后台管理系统图标可以通过以下几种方式获取： 1. 使用Vue UI框架提供的图标库，比如Element-UI、Ant-Design-Vue等，这些框架都提供了一些常用的图标库供开发者使用。 2. 使用第三方图标库，比如Font Awesome、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值