精华内容
下载资源
问答
  • iviewui

    2019-08-23 14:48:11
  • iview ui框架

    2020-01-28 11:30:20
    前端框架 参考官网: https://www.iviewui.com/docs/introduce

    前端框架 参考官网: https://www.iviewui.com/docs/introduce

    展开全文
  • 今天小编就为大家分享一篇Vuex,iView UI面包屑导航使用扩展详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 为了快速体验 MVVM 模式,我选择了非工程化方式来起步,并选择使用 Vue.js,以及基于它构建的 iView UI 框架。本文给大家分享基于 Vue.js 之 iView UI 框架非工程化实践记录,需要的朋友参考下吧
  • 项目结构:SpringBoot + Vue + iview UI/Element UI 目录 项目结构:SpringBoot + Vue + iview UI/Element UI 后端接口: iview UI 前端文件上传代码: iview效果: Element UI 前端文件上传代码 Element...

     项目结构:SpringBoot + Vue + iview UI/Element UI

     

    目录

     项目结构:SpringBoot + Vue + iview UI/Element UI

    后端接口:

    iview UI 前端文件上传代码:

    iview效果:

     

    Element UI 前端文件上传代码

    Element效果

    点击文件名后效果

     

    后端接口:

    @RestController
    public class FileUploadController {
    
        SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");
    
        @RequestMapping("/fileUpload")
        public Map<String,Object> fileUpload(@RequestParam("file") MultipartFile multipartFile, HttpServletRequest request){
            Map<String,Object> result =new HashMap<>();
            String fileName = multipartFile.getOriginalFilename();
            if(!fileName.endsWith(".jpeg")){
                result.put("status","ERROR");
                result.put("msg","文件类型上传有误");
                return result;
            }
            String format = sdf.format(new Date());
            String realPath = request.getServletContext().getRealPath("/") + format;//项目路径
    
            File folder = new File(realPath);
            if(!folder.exists()){
               folder.mkdirs();
            }
            String newName = UUID.randomUUID().toString()+".jpeg";
    
            try {
                multipartFile.transferTo(new File(folder,newName));
                String url = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+format+newName;
                result.put("status","success");
                result.put("url",url);
            } catch (IOException e) {
                e.printStackTrace();
                result.put("status","ERROR");
                result.put("msg","文件类型上传有误");
            }
    
            return result;
        }
        
    }

    iview UI 前端文件上传代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>iview UI文件上传</title>
        <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
        <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
        <script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
    
    
    </head>
    <body>
    <div id="app">
        <Upload
                multiple
                type="drag"
                action="/fileUpload"
                 :on-preview="handlePreview">
            <div style="padding: 20px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>Click or drag files here to upload</p>
            </div>
        </Upload>
    </div>
    </body>
    </html>
    <script>
        var app = new Vue({
            el:"#app",
            methods:{
                handlePreview:function(file){
                    window.open(file.response.url);
                }
    
            }
        })
    </script>

    iview效果:

     

    Element UI 前端文件上传代码

    ​<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Element UI文件上传</title>
        <link rel="stylesheet" href="index.css">
        <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
        <script src="index.js"></script>
    
    
    </head>
    <body>
    <div id="app">
    <el-upload
            class="upload-demo"
            drag
            action="/fileUpload"
            :on-preview="handlePreview"
            multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>
    </el-upload>
    </div>
    </body>
    </html>
    <script>
        var app = new Vue({
            el:"#app",
            methods:{
                handlePreview:function(file){
                    window.open(file.response.url);
                }
            }
        })
    </script>
    
    
    
    ​

    Element效果

    点击文件名后效果

     

    展开全文
  • npm安装iViewUI框架 - cmd篇

    千次阅读 2019-02-19 11:47:19
    vue+iview开发项目,如何安装引入iViewUI框架 ? cmd指令: 先cd到项目目录; cmd执行安装iview命令: npm install iview --save 执行如下截图: 以上就是关于“ npm安装iViewUI框架 - cmd篇 ” 的全部...

    vue+iview开发项目,如何安装引入iViewUI框架 ?


    cmd指令:

    1. 先cd到项目目录;

    2. cmd执行安装iview命令:

      
      	npm install iview --save
      
      

      执行如下截图:
      在这里插入图片描述

    附 · iViewUI 官网


    以上就是关于“ npm安装iViewUI框架 - cmd篇 ” 的全部内容。

    展开全文
  • vue中使用iview UI

    千次阅读 2018-08-01 21:44:07
    iview ui是一个强大的ui库基于vue,有很多实用的基础组件比elementui的组件更丰富,这里介绍如何在vue项目中使用iview开发项目。iview自己有一套后台管理模版iview-admin,可以直接拿到源代码...1 安装iviewui npm...
  • iView admin是基于Vue.js,搭配使用iView UI组件库形成的一套后台集成解决方案,由TalkingData前端可视化团队部分成员开发维护。iView admin遵守iView设计和开发约定,风格统一,设计考究
  • iView admin是基于Vue.js,搭配使用iView UI组件库形成的一套后台集成解决方案,由TalkingData前端可视化团队部分成员开发维护。iView admin遵守iView设计和开发约定,风格统一,设计考究。
  • 官网:https://weapp.iviewui.com/docs/guide/start 1、到GitHub下载 iView Weapp 的代码,将dist目录拷贝到自己的项目中。然后按照如下的方式使用组件,以 Button 为例,其它组件在对应的文档页查看: ① 添加...
  • iviewUI框架原始码的解读 自己的理解不喜欢勿看
  • iview vue 引入 教程 vue iview 引入 问题解决 vue iview 引入控制台报错解决 vue iview css 样式问题解决 vue.config.js main.js View UI vue 中使用 IView UI
  • 一、先说iview ui 的按需引用 首先、先装上iview 的依赖包;4.0的版本已经升级了,新的安装方法: NPM 安装 # 推荐使用 npm 来安装,享受生态圈和工具带来的便利,更好地和 webpack 配合使用,当然,我们也推荐...
  • 今天使用iview ui 中的radio单选按钮,踩了一个很微妙的坑,同时还有一些疑问尚未解决,分享一下,望大神留言 iview ui 官方文档中使用radio组件,lable值可以是string 和number类型,但是我在项目中使用radio进行显示默...
  • https://weapp.iviewui.com/ 二、从iview的github上下载下来代码,解压 三、将dist目录复制到项目的static目录下改名为iview 四、在需要引入的组件json文件中使用,如在日志页面加入一个按钮 ...
  • 结合iviewUI框架2.x版本,当鼠标拖到上方进行条件限制拖出if (ui.position.top < 1) ui.position.top = 0 import $ from 'jquery' import 'jquery-ui/ui/widgets/draggable' $('.ivu-modal').draggable({ ...
  • 吐槽下 iview ui 的内存泄漏问题

    千次阅读 2019-11-01 10:39:05
    项目开始前对比了 iview、ant ...问题演示去官网的组件页面随便点点就发现了: https://www.iviewui.com/components/table [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oG14EPXe-1572...
  • iviewui中表格控件中render的使用示例

    千次阅读 2018-07-07 16:46:39
     iviewui新版本中,如果内容转化输出时,如果不使用render函数,会显示不正常。老版本不存在这个问题。 [code="html"] 用户 .btn__cell button{ margin-left:3px; ...
  • 使用iViewUI组件进行表单设计的时候,需要进行到的前端验证。 一、引入iView组件 二、表单结构设计完成 三、确保表单元素Form相关指令正确设定 <Form style="border-bottom: 1px solid #ddd" :rules=...
  • 基于vue+iview UI的多级评论回复功能

    千次阅读 热门讨论 2020-05-04 22:23:16
    由于iview UI没有该组件,所以自定义设计 效果图如下 支持评论和多级回复 废话不多说,vue代码如下: 评论组件 <template> <div> <List item-layout="vertical" size="small" :split="false...
  • iview ui.zip dist文件

    2019-09-16 15:24:09
    iview app 微信小程序开发时候使用的ui框架,可以直接用来编写 简易自己编写代码 加快编写速度
  • 根据iviewUI官网https://www.iviewui.com/components/layout#ZDYCFQ,写侧边菜单遇到的问题 实现代码,使用了自定义触发器@click.native="collapsedSider"(自定义触发器,可以设置hide-trigger属性) <style ...
  • vue前端框架 iview UI库,部分表单验证。 &amp;amp;amp;lt;!-- 表单编辑区 --&amp;amp;amp;gt; &amp;amp;amp;lt;Row&amp;amp;amp;gt; &amp;amp;amp;lt;Col span=&amp;amp;quot;20&...
  • 教你用Vue.JS,ElementUI和iViewUI写出超漂亮的页面 注意 请下载项目的小伙伴在根目录的静态目录中创建媒体,海报,音乐文件夹,然后再到媒体文件夹下创建html,css,js文件夹。 请移步至博客查看技术介绍, //blog....
  • 基于IView UI 的关闭当前页面,并返回上一页 之前公司使用Iview作为项目的UI框架,而作为前端开发的我则不可避免遇到要关闭当前标签页,并返回上一标签页的问题。那时我不怎么会,后来请教项目组的大佬后才发现其实...
  • 项目中使用的iviewUI的版本是2.7.3,在使用中遇到的问题总结了一些,后续会更新,如果各位大神有遇到的坑欢迎评论补充1、modal的样式要放到最外面,否则样式给不到;2、iview组件的事件@on-change=fn,fn后面没有‘...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,787
精华内容 3,514
热门标签
关键字:

iviewui