精华内容
下载资源
问答
  • 家 heroText 标语 bgImageStyle isShowTitleInHome actionText ...希望帮助更多的人花更多的时间在内容创作上,而不是博客建造上 标题 细节 明天 希望更多的爱好者能够参与进来,帮助这个主题更好的成长
  • 如何二次改造 vuepress-theme-reco

    千次阅读 2020-12-20 20:58:01
    这是一个悲伤的故事,其实很简单,但是我花费了...安装的过程可以按照提示进行就可以了。(注:选择 blog)之后运行这个项目。 其实这个已经很不错了。但我本着瞎折腾的精神开始捣鼓了。 修改 config.js 文件 (我觉

    这是一个悲伤的故事,其实很简单,但是我花费了一天,我也不知道自己这是怎么了。我脑残。。。
    在这里插入图片描述

    首先去 github 下载 vuepress-theme-reco

    https://github.com/vuepress-reco/vuepress-theme-reco。

    npx @vuepress-reco/theme-cli init
    

    安装的过程中可以按照提示进行就可以了。(注:选择 blog)之后运行这个项目。
    其实这个已经很不错了。但我本着瞎折腾的精神开始捣鼓了。

    修改 config.js 文件

    (我觉得比较重要的一点是不要添加 base 配置。不添加就会使用默认的,但是一旦你开始配置,就会可能出现 bug。。。,比如打包的时候,各种莫名其妙的 bug,我就在这个上面花了一个小时吧)
    在这里插入图片描述

    整个放出来供大家参考

    module.exports = {
      "title": "水手服的小姑凉",
      "description": "我盼世界无 bug",
      "dest": "public",
      head: [
        ['link', { rel: 'icon', href: '/favicon.ico' }],
        ['meta', { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no' }]
      ],
      "theme": "reco",
      themeConfig: {
        author: '水手服的小姑凉',
        nav: [
          { text: '主页', link: '/', icon: 'reco-home' },
          { text: '时间轴', link: '/timeline/', icon: 'reco-date' },
          {
            text: '工具推荐',
            icon: 'reco-message',
            items: [
              { text: 'codeSandbox', link: 'https://codesandbox.io', icon: 'reco-coding' },
              { text: '正则表达式手册', link: 'https://tool.oschina.net/uploads/apidocs/jquery/regexp.html', icon: 'reco-coding' }
            ]
          },
          {
            text: '关于',
            icon: 'reco-message',
            items: [
              { text: 'CSDN', link: 'https://blog.csdn.net/qq_43477721?spm=1000.2115.3001.5113', icon: 'reco-bokeyuan' },
              { text: '码云', link: 'https://gitee.com/suiboyu', icon: 'reco-mayun' },
            ]
          }
        ],
        sidebar: {
          '/docs/theme-reco/': [
            '',
            'theme',
            'plugin',
            'api'
          ]
        },
        type: 'blog',
        // 博客设置
        blogConfig: {
          category: {
            location: 2, // 在导航栏菜单中所占的位置,默认2
            text: '分类' // 默认 “分类”
          },
          tag: {
            location: 3, // 在导航栏菜单中所占的位置,默认3
            text: '标签' // 默认 “标签”
          }
        },
        friendLink: [
          {
            title: '午后南杂',
            desc: 'Enjoy when you can, and endure when you must.',
            email: '1156743527@qq.com',
            link: 'https://www.recoluan.com'
          },
          {
            title: '水手服的小姑凉',
            desc: '水手服的小姑凉在等你',
            avatar: "https://vuepress-theme-reco.recoluan.com/icon_vuepress_reco.png",
            link: 'https://vuepress-theme-reco.recoluan.com'
          },
        ],
        logo: '/logo.png',
        // 搜索设置
        search: true,
        searchMaxSuggestions: 10,
        // 自动形成侧边导航
        sidebar: 'auto',
        // 最后更新时间
        lastUpdated: '最后更新时间',
        // 作者
        author: '水手服的小姑凉',
        // 作者头像
        authorAvatar: '/avatar.png',
        // 备案号
        record: ' 水手服的小姑凉',
        // 项目开始时间
        startYear: '2017',
      },
      "markdown": {
        "lineNumbers": true
      },
      plugins: [
        [
          //先安装在配置, npm install @vuepress-reco/vuepress-plugin-kan-ban-niang --save
          "@vuepress-reco/vuepress-plugin-kan-ban-niang",
          {
            theme: ['koharu', 'blackCat', 'whiteCat', 'haru1', 'haru2', 'haruto', 'izumi', 'shizuku', 'wanko', 'miku', 'z16'],
            clean: false,
            messages: {
              welcome: '我是lookroot欢迎你的关注 ',
              home: '心里的花,我想要带你回家。',
              theme: '好吧,希望你能喜欢我的其他小伙伴。',
              close: '再见哦'
            },
            width: 240,
            height: 352
          }
        ],
        [
          //先安装在配置, npm install @vuepress-plugin-meting --save
          'meting', {
            metingApi: "https://api.i-meto.com/meting/api",
            meting: {
              server: "netease",
              type: "playlist",
              mid: "621465725"
            },          // 不配置该项的话不会出现全局播放器
            aplayer: {
              lrcType: 3
            }
          }
        ],
        [
          //鼠标点击特效 先安装在配置, npm install vuepress-plugin-cursor-effects --save
          "cursor-effects",
          {
            size: 3,                    // size of the particle, default: 2
            shape: ['circle'],  // shape of the particle, default: 'star'
            zIndex: 999999999           // z-index property of the canvas, default: 999999999
          }
        ],
        [
          //动态标题 先安装在配置, npm install vuepress-plugin-dynamic-title --save
          "dynamic-title",
          {
            showIcon: "/favicon.ico",
            showText: "(/≧▽≦/)咦!又好了!",
            hideIcon: "/failure.ico",
            hideText: "(●—●)喔哟,崩溃啦!",
            recoverTime: 2000
          }
        ],
        [
          //图片放大插件 先安装在配置, npm install vuepress-plugin-dynamic-title --save
          '@vuepress/plugin-medium-zoom', {
            selector: '.page img',
            delay: 1000,
            options: {
              margin: 24,
              background: 'rgba(25,18,25,0.9)',
              scrollOffset: 40
            }
          }
        ],
        [
          //插件广场的流程图插件 先安装在配置 npm install vuepress-plugin-flowchart --save
          'flowchart'
        ],
        [
          //插件广场的sitemap插件 先安装在配置 npm install vuepress-plugin-sitemap --save
          'sitemap', {
            hostname: 'https://www.glassysky.site'
          }
        ],
        ["vuepress-plugin-nuggets-style-copy", {
          copyText: "复制代码",  //vuepress复制粘贴提示插件P 先安装在配置 npm install vuepress-plugin-nuggets-style-copy --save
          tip: {
            content: "复制成功!"
          }
        }],
        ["vuepress-reco/vuepress-plugin-loading-page"],
        ["@vuepress-yard/vuepress-plugin-window", {
          title: "水手服的小姑凉",  //vuepress公告插件 先安装在配置 npm install @vuepress-yard/vuepress-plugin-window --save
          contentInfo: {
            title: "水手服的小姑凉",
            needImg: true,
            imgUrl: "https://s3.ax1x.com/2020/12/13/reREkR.jpg",
            content: "随便看",
            contentStyle: ""
          },
          bottomInfo: {
            btnText: '关于',
            linkTo: ''
          },
          closeOnce: true,
          delayMount: 1000
        }]
      ]
    }
    

    当然,使用插件就得安装,看自己喜欢哪个,就安装哪个。

    {
      "name": "guliang",
      "version": "1.0.0",
      "author": "reco_luan",
      "scripts": {
        "dev": "vuepress dev . --open --host \"localhost\"",
        "build": "vuepress build ."
      },
      "devDependencies": {
        "vuepress": "1.5.4",
        "vuepress-plugin-meting": "^0.1.1",
        "vuepress-theme-reco": "1.5.7"
      },
      "dependencies": {
        "@vuepress-reco/vuepress-plugin-kan-ban-niang": "^1.0.5",
        "@vuepress-reco/vuepress-plugin-loading-page": "^1.6.0",
        "@vuepress-yard/vuepress-plugin-window": "^1.0.10",
        "vue-class-component": "^7.2.3",
        "vuepress-plugin-cursor-effects": "^1.0.0",
        "vuepress-plugin-dynamic-title": "^1.0.0",
        "vuepress-plugin-flowchart": "^1.4.3",
        "vuepress-plugin-nuggets-style-copy": "^1.0.3",
        "vuepress-plugin-ribbon": "^1.0.2",
        "vuepress-plugin-sitemap": "^2.3.1"
      },
      "description": ""
    }
    

    接下来修改根目录下的 README.md

    bgImageStyle: {
      height: '1000px'
    }
    
    这是可以修改首页中间图片大小的配置项。(有的博客喜欢将中间的图片设置成全屏的那种。其实我也喜欢。我就因为喜欢,才愿意去折腾的,你想设置多大都可以,我就是在这个上面花了一天。。。)
    ---
    home: true
    heroText: vuepress-theme-reco
    tagline: A simple and beautiful vuepress blog theme.
    # heroImage: /hero.png
    # heroImageStyle: {
    #   maxWidth: '600px',
    #   width: '100%',
    #   display: block,
    #   margin: '9rem auto 2rem',
    #   background: '#fff',
    #   borderRadius: '1rem',
    # }
    bgImageStyle: {
      height: '1000px'
    }
    isShowTitleInHome: false
    actionText: Guide
    actionLink: /views/other/guide
    features:
    - title: Yesterday
      details: 开发一款看着开心、写着顺手的 vuepress 博客主题
    - title: Today
      details: 希望帮助更多的人花更多的时间在内容创作上,而不是博客搭建上
    - title: Tomorrow
      details: 希望更多的爱好者能够参与进来,帮助这个主题更好的成长
    ---
    

    在这里插入图片描述

    这里面的图片可以自行替换成自己喜欢的。最简单的方法就是复制一张喜欢的,改成同样名字,一刷新,就可以了。

    在这里插入图片描述

    接下来要修改更多的东西,就要到源码里面了。node_modules / vuepress-theme-reco / components
    作为一名前端,对修改页面应该是特别熟悉了。我做的修改不多,就把修改的代码放出来。

    在这里插入图片描述
    图片存放路径
    在这里插入图片描述

    尽情的更换吧。乌拉

    在这里插入图片描述

    <style lang="css">
    .hero::before {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background-color: rgba(0, 0, 0, 0.5);
    }
    .scroll-down::after {
      content: "";
      position: absolute;
      display: block;
      bottom: -5 rem;
      left: calc(50% - 1.5rem);
      width: 1.5rem;
      height: 1.5rem;
      border: 0.25rem solid #fff;
      border-top: none;
      border-left: none;
      transform-origin: 50% 50%;
      transform: rotate(45deg);
      -webkit-animation: arrowMove-data 1.2s infinite;
      animation: arrowMove-data 1.2s infinite;
    }
    
    @keyframes arrowMove-data {
      0% {
        transform: translateY(0px) rotate(45deg);
      }
      100% {
        transform: translateY(100px) rotate(45deg);
        border: 0.25rem solid rgba(255, 255, 255, 0.5);
        border-top: none;
        border-left: none;
      }
    }
    </style>
    

    导航栏更换颜色(我是更换成背景色透明),当然根据你自己的喜好,进行更改
    在这里插入图片描述

    最后给你们看看效果
    在这里插入图片描述

    反正作为一名前端工程师,既然已经知道在哪里修改了。那么剩下的,就大家各自发挥吧

    剩下的就是打包,运行打包命令。有服务器传到服务器,没有服务器的使用 gitee page 一样可以玩。

    你看,一点都不多吧,但是我花了一天。。。。

    展开全文
  • vue中使用 vue-dplayer视频播放器

    千次阅读 2020-12-02 17:46:01
    VUE中使用 vue-dplayer vue-dplayer是DPlayer的vue版 支持弹幕,字幕,截图等功能 1.安装 npm install vue-dplayer -S 2.mian.js里 import VueDPlayer from "vue-dplayer"; import "vue-dplayer/dist/vue-dplayer....

    在VUE中使用 vue-dplayer

    vue-dplayer是DPlayer的vue版 支持弹幕,字幕,截图等功能
    1.安装

    npm install vue-dplayer -S
    

    2.mian.js里

    import VueDPlayer from "vue-dplayer";
    import "vue-dplayer/dist/vue-dplayer.css";
    Vue.use(VueDPlayer);
    

    3.页面使用 完整代码

    <template>
      <div class="main">
        <d-player ref="player" id="player" :options="options"></d-player>
      </div>
    </template>
    
    <script>
    export default {
      name: "main",
      data() {
        return {
          options: {
            container: document.getElementById("dplayer"), //播放器容器
            mutex: false, //  防止同时播放多个用户,在该用户开始播放时暂停其他用户
            theme: "#b7daff", // 风格颜色,例如播放条,音量条的颜色
            loop: false, // 是否自动循环
            lang: "zh-cn", // 语言,'en', 'zh-cn', 'zh-tw'
            screenshot: true, // 是否允许截图(按钮),点击可以自动将截图下载到本地
            hotkey: true, // 是否支持热键,调节音量,播放,暂停等
            preload: "auto", // 自动预加载
            volume: 0.7, // 初始化音量
            playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2, 3], //可选的播放速度,可自定义
            logo:
              "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左上角上打一个logo
            video: {
              url:
                "https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4", // 播放视频的路径
              quality: [
                // 设置多个质量的视频
                {
                  name: "高清",
                  url:
                    "https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4",
                  type: "auto" // 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或 其他自定义类型
                },
                {
                  name: "标清",
                  url:
                    "https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4",
                  type: "auto"
                }
              ],
              defaultQuality: 0, // 默认是高清
              pic:
                "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=24336452,906724543&fm=26&gp=0.jpg", // 视频封面图片
              thumbnails:
                "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=24336452,906724543&fm=26&gp=0.jpg" // 进度条上的缩略图,需要通过dplayer-thumbnails来生成
            },
            // subtitle: {
            //   //字幕
            //   url: "", //字幕网址
            //   color: "#fff", //字幕颜色
            //   fontSize: "20px",
            //   bottom: "40px"
            // },
            danmaku: {
              // 弹幕
              id: "9E2E3368B56CDBB4",
              api: "https://api.prprpr.me/dplayer/",
              token: "tokendemo", //后端验证令牌
              maximum: 1000, //弹幕最大数量
              addition: ["https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142"], //其他弹幕
              user: "DIYgod", //弹幕用户名
              bottom: "15%", //值,例如:10px,10%,即弹幕底部和播放器底部之间的距离,以防止遮挡字幕
              unlimited: true //即使弹幕重叠也显示所有弹幕
            },
            contextmenu: [
              //  自定义上下文菜单
              // 右键菜单
              {
                text: "b站",
                link: "https://www.bilibili.com"
              },
              {
                text: "选项二",
                click: player => {
                  console.log(player);
                }
              }
            ],
            highlight: [
              //进度条上的自定义时间标记
              // 进度条时间点高亮
              {
                text: "10M",
                time: 6
              },
              {
                text: "20M",
                time: 12
              }
            ]
          }
        };
      },
      mounted() {
      	// 以下为隐藏一些作者的信息和视频播放源 如不需要可删除
        // document.querySelector(".dplayer-menu").remove(); //隐藏右键菜单
        document.querySelector(".dplayer-mask").remove();
        document.querySelector(".dplayer-info-panel-item-url").remove(); //隐藏播放源
        let length = document.querySelectorAll(".dplayer-menu-item").length;
        document.querySelectorAll(".dplayer-menu-item")[length - 2].remove(); // 去掉作者信息
        document.querySelectorAll(".dplayer-menu-item")[length - 1].remove(); // 去掉作者信息
      }
    };
    </script>
    
    <style lang="less" scoped>
    .main {
      width: 1000px;
      height: 900px;
      margin: 0 auto;
      text-align: center;
    }
    /deep/.dplayer-danmaku-item {
      span {
        border: none !important; //去掉弹幕边框
      }
    }
    </style>
    
    

    参考: https://www.jianshu.com/p/c35a26bb35a1

    展开全文
  • 最近由于工作的需求,需要在后台管理界面,添加一个富文本编辑器。富文本编辑器,我们之前用过百度的ueditor,在传统模式开发的时候还是很方便的,可以很便利的进行内容编辑,然后获取到编辑内容的信息百度的...

    最近由于工作的需求,需要在后台管理界面中,添加一个富文本编辑器。

    富文本编辑器,我们之前用过百度的ueditor,在传统模式开发的时候还是很方便的,可以很便利的进行内容编辑,然后获取到编辑内容的信息

    百度的ueditor地址:

    但是这次是要整合一个vue的,还没有这么搞过,就试试吧。

    富文本编辑器的核心原理其实蛮简单的,但是自己写还是很麻烦,没有那个时间。

    1.考虑方式

    有两种方式,一种是把ueditor进行vue的移植改造。把传统模式改成webpack可用的模式就可以了。

    但是,我觉得ueditor已经很久没有维护了,界面也太丑了,所以试试别的能用的。

    2.踩坑 froala editor...

    搞了很久,按这位老兄说的

    也许是因为这个本身是收费的,也许是我哪个地方有问题,没搞出来。

    3.改换用vue-html5-editor

    改换了以后就成功了,上图看看

    先安装

    npm install vue-html5-editor --save

    安装完毕之后引入到项目中

    import VueHtml5Editor from 'vue-html5-editor'Vue.use(VueHtml5Editor, {//全局组件名称,使用new VueHtml5Editor(options)时该选项无效

    //global component name

    name: 'vue-html5-editor',//是否显示模块名称,开启的话会在工具栏的图标后台直接显示名称

    //if set true,will append module name to toolbar after icon

    showModuleName: false,//自定义各个图标的class,默认使用的是font-awesome提供的图标

    //custom icon class of built-in modules,default using font-awesome

    icons: {

    text:'fa fa-pencil',

    color:'fa fa-paint-brush',

    font:'fa fa-font',

    align:'fa fa-align-justify',

    list:'fa fa-list',

    link:'fa fa-chain',

    unlink:'fa fa-chain-broken',

    tabulation:'fa fa-table',

    image:'fa fa-file-image-o',

    hr:'fa fa-minus',

    eraser:'fa fa-eraser',

    undo:'fa-undo fa','full-screen': 'fa fa-arrows-alt',

    info:'fa fa-info'},//配置图片模块

    //config image module

    image: {//文件最大体积,单位字节 max file size

    sizeLimit: 512 * 1024,

    //上传参数,默认把图片转为base64而不上传

    //upload config,default null and convert image to base64

    upload: {

    url:'http://localhost:8080/files/upload',

    headers: {},

    params: {},

    fieldName:'file'},//压缩参数,默认使用localResizeIMG进行压缩,设置为null禁止压缩

    //compression config,default resize image by localResizeIMG (https://github.com/think2011/localResizeIMG)

    //set null to disable compression

    compress: null,//响应数据处理,最终返回图片链接

    //handle response data,return image url

    uploadHandler (responseText) {//default accept json data like {ok:false,msg:"unexpected"} or {ok:true,data:"image url"}

    var json =JSON.parse(responseText)return json.data.fileurl

    }

    },//语言,内建的有英文(en-us)和中文(zh-cn)

    //default en-us, en-us and zh-cn are built-in

    language: 'zh-cn',//自定义语言

    i18n: {//specify your language here

    'zh-cn': {'align': '对齐方式','image': '图片','list': '列表','link': '链接','unlink': '去除链接','table': '表格','font': '文字','full screen': '全屏','text': '排版','eraser': '格式清除','info': '关于','color': '颜色','please enter a url': '请输入地址','create link': '创建链接','bold': '加粗','italic': '倾斜','underline': '下划线','strike through': '删除线','subscript': '上标','superscript': '下标','heading': '标题','font name': '字体','font size': '文字大小','left justify': '左对齐','center justify': '居中','right justify': '右对齐','ordered list': '有序列表','unordered list': '无序列表','fore color': '前景色','background color': '背景色','row count': '行数','column count': '列数','save': '确定','upload': '上传','progress': '进度','unknown': '未知','please wait': '请稍等','error': '错误','abort': '中断','reset': '重置'}

    },//隐藏不想要显示出来的模块

    //the modules you don't want

    hiddenModules: ['info'],//自定义要显示的模块,并控制顺序

    //keep only the modules you want and customize the order.

    //can be used with hiddenModules together

    visibleModules: ['text','color','font','align','list','link','unlink','tabulation','image','hr','eraser','undo','full-screen','info'

    ],//扩展模块,具体可以参考examples或查看源码 //extended modules modules: {//omit,reference to source code of build-in modules } })

    在模块中引入

    模块 contents.vue

    添加内容

    name:'Contents',

    data () {return{

    id:'',

    content:''}

    },methods: {

    updateData (e) {this.content =e

    }

    }

    }

    嘿嘿,运行起来以后,你会发现,有框,但按钮不在,因为这是个坑。 按钮是个开源组件 font-awesome

    这个开源组件就是个图标库,有多种引入方式,我采用的是css全局引入的方式,

    解压放入 src/assets,再到App.vue的style引入

    @import 'assets/font-awesome-4.7.0/css/font-awesome.min.css';

    到此,引入就告一段落。

    添加文件上传的部分。

    文件上传我有两个部分

    图片文件上传: http://localhost:8080/files/upload

    这个上传要求请求方式为POST,form表单的文件部分字段名为file

    返回如下

    {

    status:200,

    data:{

    filename:"2019072935563.png",

    fileurl:"http://localhost:8080/files/2019072935563.png"},

    message:null}

    图片文件获取: http://localhost:8080/files/{imgname}

    这样就完成了所有功能

    展开全文
  • 参考vue-print-nb官方文档(https://github.com/Power-kxLee/vue-print-nb#print-preview) (一)、引入方法 vue2 1)、安装 npm install vue-print-nb --save 2)、main.js引入 import Print from 'vue-print-nb...

    参考vue-print-nb官方文档(https://github.com/Power-kxLee/vue-print-nb#print-preview)

    (一)、引入方法

    1. vue2
      1)、安装 npm install vue-print-nb --save
      2)、main.js引入
    import Print from 'vue-print-nb'
    Vue.use(Print);
    
    1. vue3
      1)、安装 npm install vue3-print-nb --save
      2)、main.js 引入
    import { createApp } from 'vue'
    import App from './App.vue'
    import print from 'vue3-print-nb'
    const app = createApp(App)
    app.use(print)
    app.mount('#app')
    

    (二)、使用方法

     <div id="printMe">
            <!--  打印的内容 -->
     </div>
    
    <button v-print="'#printMe'">Print</button>
    

    (三)、修改样式,并去除页眉和页脚

    // 打印页面样式写在这里
    @media print {
    	/*去除页眉页脚*/
        @page {
            size: auto;
            margin: 3mm 0;
        }
    
        html {
            margin: 0 10mm;
        }
    
        body {
            margin: 6mm 0;
        }
        /*去除页眉页脚*/
        
    	/*其他样式往下写*/
    }
    

    这样就可以了,有什么问题欢迎评论区讨论交流~
    扫码加q群
    在这里插入图片描述

    展开全文
  • 介绍短视频大火已经有很长时间了,日常工作我们可能很容易接到视频播放相关的需求。这是一款非常优秀的视频播放组件,pc 或者 移动都可以使用,而且UI精美,美观,丝毫不逊色于爱奇艺、优酷等国内一线网站的UI。...
  • el-time-picker type="datetimerange" :default-time="['12:00:00']" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;...
  • vue中el-table对时间的处理

    千次阅读 2020-09-04 00:41:54
    vue中el-table对时间的处理 <el-table-column prop="dateTime" label="上课时间" min-width="150" :formatter="timestampToTime" show-overflow-tooltip></el-table-column> methods:{ ...
  • 1、通过 npm 安装 vue-print-nb npm install vue-print-nb --save 2、挂载到 Vue 上 ​import Print from 'vue-print-nb' Vue.use(Print) 3、配置打印对象 <div id="main"> 这里是要打印的东西 </...
  • npm install vue-dplayer -S 2.在mian.js里引入并使用 import VueDPlayer from "vue-dplayer"; import "vue-dplayer/dist/vue-dplayer.css"; Vue.use(VueDPlayer); 3.页面使用 完整代码 <template> <div...
  • vue-flip-down 安装 cnpm install vue-flip-... :endDate="1540212399971" // 结束的时间,即倒计时会从当前时间一直到endDate停止,可以是一个日期对象,也可以是毫秒数 @timeUp="func" // 当倒计时走到0时会触发
  • js或者vue-print-nb插件在chorme调用打印是都会带上 页眉页脚及时间。 在chorme可以手动设置 打印是否要页眉页脚,如果不想手动打印时设置可以参考用css 控制: 参考:...
  • 1,克隆项目 git clone ...1,导入vue-admin-template 项目后 打开.env.development.env.production.env.staging 对请求路径进行修改 2,修改后对src/utils/request.js下的这个文件进行响应的修...
  • 文章目录 一、Node Sass does not yet support your current ...真的血的教训,还花费了巨多时间去逐一排查,找资料,搜博客,哦豁原来是这个版本问题!!好了,记住了,没事别手贱升级版本,能用则不要去动他!!!
  • 编写时间: 2019年7月21日 ...以下是自己使用过程的一些信息点的记录,主要介绍请求跨域请求自己的接口 0. 首先不用说就是下载项目导入项目了 导入项目后执行安装命令 npm install 1. 准备接口 ...
  • 1. 初始化vue-router 首先安装vue-router,并创建名为router的文件夹,在下新建一个index.js npm i vue-router 2. vue-router的简单配置 首先引入vuevue-router 然后vue.use引入该插件 创建个常量并按一些规律来...
  • template <a-form-model-item label="出生日期" prop="birthday"> <a-date-picker class="detail" @change="onChangeTime" placeholder="" :...}, } 展示 十年前的时间选择正常使用 距今十年的日期不可选择
  • 由于vue-element-admin 的架构再 4.0.0 版本后做了重构,所以写这个文章,对改动比较大的部分做个讲解,方便大家入门学习。虽说项目做了重构,但是整体结构上和之前的还是很相似的,所以有些和之前差不多的我会直接...
  • vue代码块 <template> <div v-viewer> <div v-for="(item, index) in imgArray" :key="item.id" > 这里是缩略图地址" :onerror="javascript:this.src='这里是加载错误时显示的图片地址'" :data-source="这里...
  • 详解三种方式解决vue中v-html元素标签样式发布时间:2020-09-12 08:45:49来源:脚本之家阅读:112作者:honey缘木鱼Vue为v-html标签添加CSS样式{{news.title}}{{news.datetime}}返回列表当我们使用v-html渲染...
  •   前段时间,针对大文件上传使用 vue-simple-uploader 实现切片上传。有同事反应,在进行计算文件md5的时候,选中的文件会处于暂停上传的状态,让人有点击继续按钮的冲动,让我将操作按钮隐藏掉。   本来想直接...
  • vue-baidu-map 离线地图制作(不需要修改组件代码)

    千次阅读 热门讨论 2020-12-02 17:10:44
    前言 最近做了一个地图项目,用的技术是vue-baidu-map,临近收尾的时候被告知要做离线版本,真的憋屈。而网上近乎所有的技术博客都是对于原生地图api的,对于vue...图箭头所指为百度api的秘钥 3、下载百度api的js文件
  • 今天使用vue3做后台管理页面的左侧导航栏用到了el-submenu,但是显示出了问题,不能正常显示。感觉是这个组件的问题,查了一圈没找到解决方法,最后看官方文档发现el-submenu变成了el-sub-menu(大写的*,有点无语) ...
  • vue-video-player禁止右键点击

    千次阅读 2019-05-24 14:37:20
    哇瑟,这个问题网上搜不到方法,郁闷了一晚上,几度让我想放弃vue-video-player,自己写一个能切换速率的,最终,哈哈,很开心,因为不想写,第二天午睡了灵感大发,感谢午休时间不知道是谁放的刺耳的音乐加上长沙的...
  • 本文适合做过全栈开发的同学,最起码需要会vue+spring boot的前后端环境搭建,以及基本的前后端交互逻辑,否则你是听不懂的,最起码是做不了测试的 如果你只是前端工程师,那么自己mock模拟响应就可以了 ...
  • vue-count-to是一个无依赖轻量级组件,可以自动进行加计数和减计数 使用 <template> <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo> </template> <...
  • SpringBoot整合vue-admin-template实现登录

    千次阅读 2020-11-04 16:31:51
    vue-admin-template简介 前后端分离开发模式越来越受开发人员的喜爱,开源项目vue-admin-template 是一个后台前端解决方案,它基于 vue 和 element-ui实现。更多详情请阅读vue-template-admin官网,vue-admin-...
  • vue 动态取消v-model

    千次阅读 2018-10-19 17:02:56
    使用$off方法注销事件即可 import Vue from 'vue';... //解除数据绑定,用于表单预览,防止其它开发者去除readonly、disabled binding.value &amp;&amp; node.componentInstance &am...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,071
精华内容 4,828
关键字:

vue中如何把时间的-去掉

vue 订阅