精华内容
下载资源
问答
  • vue.js图片处理组件_Vue.js的简单图片/视频灯箱组件
    2020-07-28 19:37:33

    vue.js图片处理组件

    Vue更大! (Vue It Bigger!)

    A simple image / video lightbox component for Vue.js. Based on vue-image-lightbox.

    Vue.js的简单图片/视频灯箱组件。 基于vue-image-lightbox。

    特征 (Features)

    • Unobtrusive interface that disappears after a few seconds, reappears on mouse activity

      几秒钟后消失的不显眼的界面会在鼠标活动时重新出现

    • Optional thumbnail strip with all of the gallery's media

      画廊所有媒体的可选缩略图条

    • Can show an HTML enabled caption under each image or video

      可以在每个图像或视频下方显示启用HTML的标题

    • Can play the slideshow automatically

      可以自动播放幻灯片

    • All of the graphics (previous, next and close buttons) can be customized via slots

      可以通过插槽自定义所有图形(上一个,下一个和关闭按钮)

    • Can skip to next / previous media programatically

      可以以编程方式跳到下一个/上一个媒体

    对vue-image-lightbox的改进 (Improvements over vue-image-lightbox)

    • Lightbox opens and closes with a short fade

      灯箱以淡入淡出的方式打开和关闭

    • Media's width is no longer limited

      介质的宽度不再受限制

    • When opening the lightbox the media doesn't flicker

      打开灯箱时,媒体不会闪烁

    • Moved caption bar and image counter off the media to the bottom of the screen

      将标题栏和图像计数器从媒体移至屏幕底部

    • Moved thumbnails to the top of the screen

      将缩略图移到屏幕顶部

    • All interface elements have a background for better visibility

      所有界面元素都有背景,以提高可见性

    • Simpler CSS

      更简单CSS

    安装 (Installation)

    NPM /纱线 (NPM / Yarn)

    Install the package:

    安装软件包:

    npm install vue-it-bigger
    yarn add vue-it-bigger

    Then import it in your project at your entry point (main.js normally)

    然后将其导入到项目中的入口点(通常为main.js )

    import Vue from 'vue'

    and use the lightbox:

    并使用灯箱:

    import LightBox from 'vue-it-bigger'
    
    export default {
      components: {
        LightBox,
      },
    }

    浏览器全局 (Browser global)

    <script src="path/to/vue.js"></script>
    <script src="path/to/dist/vue-it-bigger.js"></script>

    用法 (Usage)

    You can simply view App.vue to see how to use vue-it-bigger

    您可以简单地查看App.vue以了解如何使用vue-it-bigger

    Import CSS style

    导入CSS样式

    require('vue-it-bigger/dist/vue-it-bigger.min.css')
    // Use only when you are using Webpack

    How to use:

    如何使用:

    <LightBox :media="media"></LightBox>

    媒体道具的结构: (Structure of the media prop:)

    [
      { // For image
        thumb: 'http://example.com/thumb.jpg',
        src: 'http://example.com/image.jpg',
        caption: 'caption to display. receive <html> <b>tag</b>', // Optional
        srcset: '...' // Optional for displaying responsive images
      },
      { // For video
        thumb: 'https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg',
        sources: [
          {
            src: 'https://www.w3schools.com/html/mov_bbb.mp4',
            type: 'video/mp4'
          }
        ],
        type: "video",
        caption: '<h4>Monsters Inc.</h4>',
        width: 800, // Required
        height: 600, // Required
        autoplay: true, // Optional: Autoplay video when the lightbox opens
      }
    ]

    选件 (Options)

    物产 (Properties)

    nametypedefaultdescription
    mediaArrayrequiredMedia array to display
    showLightBoxBooleantrueWhether to show lightbox or not at the beginning
    startAtNumber0Index of the image that you want to start at
    nThumbsNumber7Number of thumbnail images
    showThumbsBooleantrueWhether to show thumbnails or not
    autoPlayBooleanfalseMove to next image automatically
    autoPlayTimeNumber3000 (ms)Time to stop at an image before move on to next image
    showCaptionBooleanfalseWhether to show caption or not
    disableScrollBooleantrueset to `true` to avoid scrolling views behind lightbox
    lengthToLoadMoreNumber0Minimum length unto end to emit load more event
    closableBooleantrueDisplay the close button at the right top corner or not. ESC clicking-close will also be disabled if closable is set to false.
    closeTextStringClose (Esc)Text for the close button
    previousTextStringPreviousText for the previous image button
    nextTextStringNextText for the next image button
    previousThumbTextStringPreviousText for the previous thumb image button
    nextThumbTextStringNextText for the next thumb image button
    名称 类型 默认 描述
    媒体 数组 需要 要显示的媒体阵列
    showLightBox 布尔型 真正 一开始是否显示灯箱
    startAt 0 您要开始的图像的索引
    拇指 7 缩略图数量
    showThumbs 布尔型 真正 是否显示缩略图
    自动播放 布尔型 自动移至下一张图像
    autoPlayTime 3000(毫秒) 在移至下一张图像之前需要在一张图像处停止
    showCaption 布尔型 是否显示字幕
    disableScroll 布尔型 真正 设置为“ true”以避免在灯箱后面滚动视图
    lengthToLoadMore 0 结束发送负载事件的最小长度
    可关闭 布尔型 真正 是否在右上角显示关闭按钮。 如果将closesable设置为false,则ESC单击关闭也将被禁用。
    closeText 关闭(Esc) 关闭按钮的文字
    previousText 以前 上一个图像按钮的文字
    nextText 下一个 下一个图像按钮的文字
    previousThumbText 以前 前一个拇指图像按钮的文本
    nextThumbText 下一个 下一个拇指图像按钮的文本

    方法 (Methods)

    nameargumentsdescription
    nextImage()Move to next image
    previousImage()Move to previous image
    closeLightBox()Close lightbox
    showImage(index)Show the image at index
    名称 论点 描述
    nextImage () 移至下一张图片
    previousImage () 移至上一张图片
    closeLightBox () 关闭灯箱
    showImage (指数) 在索引处显示图像

    插槽 (Slots)

    (close)

    The content of the close button.

    关闭按钮的内容。

    The content of the footer under the image.

    图片下页脚的内容。

    槽镜 (slot-scopes)
    nametypedescription
    currentintegerNumber of the current image displayed
    totalintegerNumbers of the images
    名称 类型 描述
    当前 整数 当前显示的图像编号
    整数 图像编号

    以前 (previous)

    The previous button on the main image.

    主图像上的上一个按钮。

    下一个 (next)

    The next button on the main image.

    主图像上的下一个按钮。

    previousThumb (previousThumb)

    The previous button on the thumbs list.

    拇指列表上的上一个按钮。

    nextThumb (nextThumb)

    The next button on the thumbs list.

    拇指列表上的下一个按钮。

    customCaption (customCaption)

    The caption of the current image.

    当前图像的标题。

    videoIcon (videoIcon)

    The Icon used for videos

    用于视频的图标

    大事记 (Events)

    • onOpened: Emit when the lightbox is opened.

      onOpened :打开灯箱时发出。

    • onClosed: Emit when the lightbox is closed.

      onClosed :关闭灯箱时发出。

    • onLastIndex: Emit when the current image is the last one of the list.

      onLastIndex :当当前图像是列表的最后一个时发出。

    • onFirstIndex: Emit when the current image is the first one of the list.

      onFirstIndex :当当前图像是列表的第一个图像时发出。

    • onStartIndex: Emit when the current image is at the startAt index (specified in the properties).

      onStartIndex :当当前图像位于startAt索引(在属性中指定)时发出。

    • onLoad: Emit when there are lengthToLoadMore images left in the array (specified in the properties). For example, if lengthToLoadMore = 2 and there are 7 images in your array, when you reach index 4 (which means there are 2 images left which are not discovered yet), this event will be emitted. After that, if the image array are updated and there are totally 15 images, the event will be emitted at index 12.

      onLoad :当数组中lengthToLoadMore图像(在属性中指定)时发出。 例如,如果lengthToLoadMore = 2且数组中有7张图像,则当到达索引4时(这意味着还剩下2张尚未发现的图像),将发出此事件。 之后,如果图像数组被更新并且总共有15张图像,则事件将在索引12处发出。

    开发(NPM /纱线) (Development (NPM / Yarn))

    Clone the repository, cd into it and run:

    克隆存储库,cd进入其中并运行:

    npm run dev
    yarn dev

    翻译自: https://vuejsexamples.com/a-simple-image-video-lightbox-component-for-vue-js/

    vue.js图片处理组件

    更多相关内容
  • 加上后台要求要传递小于2M的图片,因此封装了一个upload.vue组件作为上传页面的子组件,它用于管理图片上传逻辑。 upload.vue解析 upload主要用于实现表单上传图片的需求,主要由input +img 构成当没有图片的时候...
  • 一个简单的vue图片预览组件

    千次阅读 2019-08-27 15:00:57
    一个简单的vue图片预览组件一个简单地图片预览组件vue-img-previewer使用方式参数组件简单,注释详细,易于第二次开发 一个简单地图片预览组件vue-img-previewer github页面 使用方式 安装 yarn add vue-img-...

    一个简单地图片预览组件vue-img-previewer

    github页面

    组件展示

    使用方式

    1. 安装
    yarn add vue-img-previewer
    
    npm i vue-img-previewer --save
    
    1. 然后在要使用的组件里按照下面的类似格式书写
    <template>
      <div class="hello">
        <li v-for="(item,index) in imgDataList"
            :key="index">
          <img :src="item.url"
               style="width:300px;height:auto;cursor: zoom-in"
               @click="showViewer(index)"></li>
        <ImgPreview :viewerVisible.sync="viewerVisible"
                    :imgDataList.sync="imgDataList"
                    :imgIndex.sync="imgIndex"
                    ref="ImgPreview"></ImgPreview>
    
      </div>
    </template>
    
    <script lang="ts">
    import { Component, Prop, Vue } from 'vue-property-decorator';
    import {ImgPreview} from 'vue-img-previewer';
    
    @Component({
      components: {
        ImgPreview,
      },
    })
    export default class HelloWorld extends Vue {
      public viewerVisible: boolean = false; // 子组件中viewer的可见性
      public imgIndex: number = 100; // 图片的索引
      public imgDataList: any[] = [
        { title: 'secend', url: require('./testImg/261652.jpg'), id: 2 },
        { title: 'third', url: require('./testImg/164F25161-2.jpg'), id: 3 },
        { title: 'four', url: './testImg/596296.jpg', id: 4 },
        { title: 'five', url: require('./testImg/timg.jpg'), id: 5 },
        { title: 'six', url: require('./testImg/245484.jpg'), id: 6 },
      ]; // 得到的img的数据,请务必按照这个格式写
      public showViewer(index: number) {
        this.imgIndex = index;
        setTimeout(() => {
          this.viewerVisible = true;
          (this.$refs.ImgPreview as any).init(this.imgIndex);
        }, 0)
      }
    }
    </script>
    

    上面为了简单测试,直接用了require,这里可以是从后端拿到的base64数据

    图片数据的格式需为
    { title: 'xxx', url: 'xxxxxx.xxx', id: x }
    
    1. 运行
    yarn serve
    
    npm run serve
    

    参数

    名称功能默认值可选值
    viewerVisiblevue-previewer的可见性,必填值nullfalse
    imgIndex图片的索引,必填值null0-~
    imgDataList图片的数据null数组类型按照{ title: ‘xxx’, url: ‘xxxxxx.xxx’, id: x }

    组件简单,注释详细,易于第二次开发

    刚学了点ts和vue做了这个组件,主要是vue的组件有点少,我搜索的时候,只看见v-viewer这个封装了 viewer.js的组件和一些功能较少的组件,不易于维护和二次开发,于是我做了这个组件,我是刚入前端的新手,希望各位指点,如果可以献上你的star和fork,小生感激不尽

    展开全文
  • vue上传图片组件

    千次阅读 2019-08-21 15:03:34
    上传图片组件也是后台管理系统的最重要的基础组件之一,这里功能支持图片文件类型检验,图片大小检验,图片分辨率校验以及图片比列校验等功能。 主要依赖说明 { "element-ui": "2.11.1", "vue": "^2.6.10", ...

    上传图片组件

    简介

    上传图片组件也是后台管理系统的最重要的基础组件之一,这里功能支持图片文件类型检验,图片大小检验,图片分辨率校验以及图片比列校验等功能。

    主要依赖说明 (先安装,步骤略)

     {
        "element-ui": "2.11.1",  
        "vue": "^2.6.10",
        "vue-router": "^3.0.1"
     }
    

    正文

    1.组件

    src/components/Upload.vue

    <template>
      <div class="custom-upload">
        <input
          :id="id"
          type="file"
          style="display: none"
          name="single"
          accept="image/*"
          @change="onChange"
        />
        <el-button size="small" type="primary" :loading="loading" @click="handleOpenFile">
          <i class="fa fa-upload" />
          添加图片
        </el-button>
        <div v-if="tips" class="tips clear-margin-top">{{ tips }}</div>
      </div>
    </template>
    
    <script>
    // 上传文件组件
    import {
      isAppropriateResolution,
      isAppRatio,
      isImageFile,
      isMaxFileSize
    } from '@/utils/upload'    // upload.js 文件见下文
    
    // 定义的接口根据自己项目更换
    import { uploadImage } from '@/api/upload'  
    
    import { Message } from 'element-ui'
    
    export default {
      name:'Upload',
      props: {
        // 最大上传文件的大小 单位(MB)
        maxFileSize: {
          type: Number,
          default: 2
        },
        // 提示内容
        tips: {
          type: String
        },
        // 图片文件分辨率的宽度
        width: {
          type: Number,
          width: 460
        },
        // 图片文件分辨率的高度
        height: {
          type: Number,
          default: 300
        },
        // 是否限制分辨率
        isResolution: {
          type: Boolean,
          default: false
        },
        // 是否限制比列
        isRatio: {
          type: Boolean,
          default: false
        },
        // 比列 ag: 1:1 时给 [1,1]
        ratio: {
          type: Array
        }
      },
      data() {
        return {
          id: 'upload-input-' + +new Date(),
          loading: false
        }
      },
    
      methods: {
        // 打开文件
        handleOpenFile() {
          const input = document.getElementById(this.id)
          // 解决同一个文件不能监听的问题
          input.addEventListener(
            'click',
            function() {
              this.value = ''
            },
            false
          )
          // 点击input
          input.click()
        },
    
        // 选择好文件
        async onChange($event) {
          this.loading = true
          const file = $event.target.files[0]
          if (!file) {
            this.loading = false
            return Message.error('选择图片失败')
          }
    
          // 限制为图片文件
          if (!isImageFile(file)) {
            this.loading = false
            return
          }
    
          // 限制文件上传大小
          if (!isMaxFileSize(file, this.maxFileSize)) {
            this.loading = false
            return
          }
    
          try {
            // 限制分辨率
            if (this.width !== 0 && this.height !== 0 && this.isResolution) {
              await isAppropriateResolution(file, {
                width: this.width,
                height: this.height
              })
            }
    
            // 限制比列
            if (this.isRatio && this.ratio && this.ratio.length === 2) {
              await isAppRatio(file, this.ratio)
            }
            // 开始上传
            this.upload(file)
          } catch (error) {
            Message.error(error.message || '上传失败')
            console.log(error)
            this.loading = false
          }
        },
    
        // 自定义上传
        async upload(file) {
          try {
            const res = await uploadImage(file)
            this.$emit('subUploadSucceed', res)
            Message.success('上传成功')
            this.loading = false
          } catch (error) {
            this.loading = false
            console.log(error)
            Message.error(error.message || '上传失败')
          }
        }
      }
    }
    </script>
    
    <style lang="scss"  scoped >
    .custom-upload {
      .tips {
        margin-top: 10px;
        color: red;
        font-size: 12px;
      }
      .clear-margin-top {
        margin-top: 0;
      }
    }
    </style>
    
    

    2.使用

    <template>
      <div>
        <app-upload
          tips="请上传720*294的图片"
          :is-resolution="true"
          :width="720"
          :height="294"
          @subUploadSucceed="handleUploadSucceed"
        />
        <img v-if="url" :src="url" class="image-size" />
      </div>
    </template>
    
    <script>
    import AppUpload from '@/components/Upload'
    export default {
      name: 'Banner',
      components: {
        AppUpload
      },
      data() {
        return {
          url: ''
        }
      },
      methods: {
        // 海报上传成功
        handleUploadSucceed(url) {
          this.url = url
        }
      }
    }
    </script>
    
    <style rel="stylesheet/scss" lang="scss" scoped>
    .image-size {
      margin-top: 10px;
      width: 150px;
      height: 92px;
      cursor: pointer;
    }
    </style>
    

    3.补充src/utils/upload.js 文件

    import { Message } from 'element-ui'
    
    /**
     *
     * @param {file} file 源文件
     * @desc 限制为图片文件
     * @retutn 是图片文件返回true否则返回false
     */
    export const isImageFile = (file,fileTypes) => {
      const types =fileTypes|| [
        'image/png',
        'image/gif',
        'image/jpeg',
        'image/jpg',
        'image/bmp',
        'image/x-icon'
      ]
      const isImage = types.includes(file.type)
      if (!isImage) {
        Message.error('上传文件非图片格式!')
        return false
      }
    
      return true
    }
    
    /**
     *
     * @param {file} file 源文件
     * @param {number} fileMaxSize  图片限制大小单位(MB)
     * @desc 限制为文件上传大小
     * @retutn 在限制内返回true否则返回false
     */
    export const isMaxFileSize = (file, fileMaxSize = 2) => {
      const isMaxSize = file.size / 1024 / 1024 < fileMaxSize
      if (!isMaxSize) {
        Message.error('上传头像图片大小不能超过 ' + fileMaxSize + 'MB!')
        return false
      }
      return true
    }
    
    /**
     *
     * @param {file} file 源文件
     * @desc 读取图片文件为base64文件格式
     * @retutn 返回base64文件
     */
    export const readFile = file => {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.onload = e => {
          const data = e.target.result
          resolve(data)
        }
        reader.onerror = () => {
          const err = new Error('读取图片失败')
          reject(err.message)
        }
    
        reader.readAsDataURL(file)
      })
    }
    
    /**
     *
     * @param {string} src  图片地址
     * @desc 加载真实图片
     * @return 读取成功返回图片真实宽高对象 ag: {width:100,height:100}
     */
    export const loadImage = src => {
      return new Promise((resolve, reject) => {
        const image = new Image()
        image.src = src
        image.onload = () => {
          const data = {
            width: image.width,
            height: image.height
          }
          resolve(data)
        }
        image.onerror = () => {
          const err = new Error('加载图片失败')
          reject(err)
        }
      })
    }
    
    /**
     *
     * @param {file} file 源文件
     * @param {object} props   文件分辨率的宽和高   ag: props={width:100, height :100}
     * @desc  判断图片文件的分辨率是否在限定范围之内
     * @throw  分辨率不在限定范围之内则抛出异常
     *
     */
    export const isAppropriateResolution = async(file, props) => {
      try {
        const { width, height } = props
        const base64 = await readFile(file)
        const image = await loadImage(base64)
        if (image.width !== width || image.height !== height) {
          throw new Error('上传图片的分辨率必须为' + width + '*' + height)
        }
      } catch (error) {
        throw error
      }
    }
    
    /**
     *
     * @param {file} file 源文件
     * @param {array} ratio   限制的文件比例 ag:  ratio= [1,1]
     * @desc 判断图片文件的比列是否在限定范围
     * @throw  比例不在限定范围之内则抛出异常
     */
    export const isAppRatio = async(file, ratio) => {
      try {
        const [w, h] = ratio
        if (h === 0 || w === 0) {
          const err = '上传图片的比例不能出现0'
          Message.error(err)
          throw new Error(err)
        }
        const base64 = await readFile(file)
        const image = await loadImage(base64)
        if (image.width / image.height !== w / h) {
          throw new Error('上传图片的宽高比例必须为 ' + w + ' : ' + h)
        }
      } catch (error) {
        throw error
      }
    }
    
    
    展开全文
  • 这个项目主要是以OSS图片上传(Web直传方式)实现素材管理主要功能以OSS图片上传及保存在服务器中、分组查询、类别查询、文件名称查询、文件地址查询、OSS图片删除及删除数据库的数据、分组增删改。
  • 本文解决,upload组件 file-list的动态绑定list1,list2 …,实现动态添加,相信很多电商后台管理系统都会遇到这个需求,例子如下 本例,我是使用的upload默认的上传地址(很多图片不能上传,你可以在本地截几张图片...
  • 分享一个适用于后台管理系统、网站等的图片查看器。 demo在线链接: duo-image-viewer 支持以下功能: 1.缩放: 2.旋转 3.拖拽 4.全屏 技术栈:vue 如何使用: 1.安装依赖 npm i duo-image-viewer --save // cnpm ...

    分享一个适用于后台管理系统、网站等的图片查看器。

    demo在线链接: duo-image-viewer

    支持以下功能:

    1.缩放:
    在这里插入图片描述

    2.旋转
    在这里插入图片描述

    3.拖拽

    在这里插入图片描述

    4.全屏

    技术栈:vue

    如何使用:

    1.安装依赖

    npm i duo-image-viewer --save  // cnpm i duo-image-viewer --save
    

    2.引入并注册组件
    找到vue项目中的main.js 文件并加入如下代码:

    import duoImageViewer from 'duo-image-viewer' // 引入组件
    Vue.use(duoImageViewer) // 注册组件
    

    3.在页面中使用

    <template>
      <div>
        <button @click="handleOpen">打开查看器</button>
        <duo-image-viewer 
          :src="src" 
          :srcList="srcList" 
          @close="handleClose" 
          :showViewer="showViewer"
        />
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          src: {
            name: '',
            url: "https://baidu.com/pictures/2020-09-08/1599535213868-GDJJZizFVtepBxlXpq.jpg"
          },
          srcList: [
            "https://baidu.com/pictures/2020-09-08/1599535213868-GDJJZizFVtepBxlXpq.jpg",
            "https://baidu.com/pictures/2020-09-08/1599535221238-tQfrTrrwOLSdhtiVBY.jpg",
          ],
          showViewer: false,
        };
      },
      methods: {
        handleOpen() {
          this.showViewer = !this.showViewer
        },
        handleClose() {
          this.showViewer = false
        }
      }
    };
    </script>
    

    其中showViewer控制显示隐藏,src表示当前展示的图片,srcList表示要展示图片列表

    GitHub地址:duofuni/duo-image-viewer

    展开全文
  • 组件名为upload 通过这个组件可以上传图片给服务器 <template> <div> 活动封面: <input type="file" accept="image/*" @change="changeImage()" ref="avatarInput"/> <div class="pic...
  • 前奏 学习一个新的知识,应该带有一些目的性,或者了解一下相关背景,带着疑问去学一...排除我们学过vue的动态组件,我们可以这样实现 <template> <div class='demo'> <!-- 用户管理 --> <UserMana
  • 在客户开发一套门户管理系统时,集成了tinymce组件,用于编辑内容,springboot不同于其他项目。  是集成tomcat的,文件和图片是不能直接访问的。所以我在做集成富文本编辑器时,需要处理图片的问题。 这个问题跟上...
  • 插件:vue-preview (vue图片预览组件 ) vue点击图片预览放大(可旋转、翻转、缩放、上下切换、键盘操作) 插件viewerjs GitHub地址:https://github.com/fengyuanchen/viewerjs 加入全局方式的loading: ...
  • 使用elementui的 el-upload插件实现图片上传组件 每个项目存在一定的特殊性,所以数据的处理会不同 pictureupload.vue: <el-upload :action=baseUrl + '/api/public/image' list-type=picture-card :on-...
  • Vue 常用的组件

    2020-06-12 11:59:06
    UI组件 框架 element- 饿了么出品的Vue2的web UI工具套件 mint-ui- Vue 2的移动UI元素 ...vuetify- 为移动而生的Vue JS 2组件框架 vonic- 快速构建移动端单页应用 vue-blu- 帮助你轻松创建web应...
  • 使用vue-ueditor-wrap组件时导入的百度ueditor资源包,如果要恢复百度ueditor图片组件的功能,就去UEditor/dialogs/image/image.html 里面取消屏蔽23,24,25行代码,如果需要查看...在线图片插入,在线图片管理 这篇文章哦
  • 基于Vue图书管理app技术要点: 1 此系统web端接口采用java语言和ssm框架实现,可以升级Springboot 2 客户端和服务器通信采用axios组件,格式采用封装好的json数据格式 3 实现了图书的添加,修改,删除以及更加关键词...
  • 基于iView的Vue.js 2.0管理管理系统模板。 介绍 iView Admin是一个前端管理后台集成解决方案。 它基于并使用UI Toolkit 。 产品特点 登录/注销 权限认证 过滤器列表 切换权限 i18n 组件 富文本编辑器 Markdown...
  • kalrry前言一、Vue.js UI组件二、Vue.js开发框架三、Vue.js实用库四、Vue.js服务端五、Vue.js辅助工具六、Vue.js应用实例七、Vue.js Demo示例八、详细分类01、UI组件及框架02、滚动scroll组件03、slider组件40、编辑...
  • 一个基于Vue2.0的在线客服系统。包括服务端和客户端。 特征 支持1客服对多用户 支持客户选择客服 输入框支持文本,图片,表情,文件传输 输入框支持粘贴图片,文本表情混合 im-server im服务端 im-client im客户端 ...
  • Vue2.0+组件库总结

    2020-06-18 01:28:31
    Vux- 基于Vue和WeUI的组件库 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI 组件库 Keen-UI- 轻量级的基本UI组件合集 vue-material- 通过Vue Material和Vue 2建立精美的app应用 muse-ui- ...
  • 基于vuejs开发的后台管理系统模板,使用vue-cli4脚手架,引用Element UI组件库,支持 ,适合新手练习,老手开发,上手简单 功能 元素用户界面 登录/订阅 表格 标签选项卡 表单 图表 :bar_chart: 富文本编辑器 ...
  • vue组件总结

    2021-02-20 18:13:39
    一、UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 ...vuetify - 为移动而生的Vue JS 2组件框架 vonic - 快速构建移动端单页应用 vue-blu - 帮助你轻松创建we
  • Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快!若您有遇到其它相关问题,非常欢迎在评论中留言讨论,达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧!2013年7月28日,尤...
  • vue常用组件

    2022-05-11 13:28:07
    一、Vue.js UI组件 二、Vue.js开发框架 三、Vue.js实用库 四、Vue.js服务端 五、Vue.js辅助工具 六、Vue.js应用实例 七、Vue.js Demo示例 八、详细分类 01、UI组件及框架 02、滚动scroll组件 03、slider...
  • Vue table 表格组件作为绝大多数项目需要内嵌的组件,可谓十分重要。表格看起来虽简单,实则坑很深,像搜索、排序、分页、无限加载等功能看起来很好实现,其实相当繁琐。选择适合自己项目应用场景的 Vue table ,会...
  • Vue 项目打包、组件打包使用 vue-cli 脚手架项目打包步骤 使用 vue-cli 脚手架新建项目 新建vue项目的过程见:https://blog.csdn.net/qq_37248504/article/details/107169812 打包配置说明 打包的配置在build下 ...
  • Vue.use(ElementUI) 变成这样 然后终端输入 npm install babel-plugin-component -D npm run dev 若要加入其他界面 在 src -> router -> index.js中 routers中 adminMange就是自己加的 .
  • Vue3组件通信总结

    千次阅读 多人点赞 2020-12-16 21:07:41
    我们知道vue3的Composition Api是它几个最大亮点之一,所以下文都是在setup中演示代码的实现。后面会以开发几个简单form组件为例子来演示。 基本操作 这里先简单开发一个VInput的输入框组件组件就像一个函数,...
  • vue后台管理系统富文本组件tinymce 简介 富文本组件作为后台管理系统的最重要的基础组件之一,一定要选择坑比较少的富文本厂家。这里使用的是好看又坑少的tinymce。 主要依赖说明 (先安装,步骤略) { "element-...
  • 之前发了一篇关于自己看待前端组件化的文章,但是由于学习和实践的业务逻辑差异,所以自己练习的一些demo逻辑比较简单,打算用vue重构现在公司做的项目,所以在一些小的功能页面上使用vue来做的,现在写的这个是项目...
  • UI组件及框架 element- 饿了么出品的Vue2的web UI工具套件 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI ... vuetify- 为移动而生的Vue JS 2组件框架 vonic- 快速构建移动端单页应用 vue-blu- 帮助...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,799
精华内容 8,319
关键字:

vue图片管理组件