<template> <div> <img v-for="(star,index) in stars" :src="star.src" @click="rating(index)" alt="星星图片"/> </div></template> <script> //星星的图片路径 // var starOffImg = "../../../sta

在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&Element的前端项目采用第三方组件 vue-drag-resize和图片转换Base64的方式实现图片印章的盖章处理. 1.图片转换为Base64处理 图片转换为Base64编码可以通过在线工具的转换方式实现图片转Base64编码,网上很多在线的处理,百度一下即可. 如:https://c.runo

在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一般通过签名表的方式(银行很常见)实现电子签名的处理.本篇随笔介绍如何基于Vue &Element前端的技术实现电子签名的处理. 1.实现电子签名的组件 我们知道,很多常见的功能,我们都会引入对应的组件来做页面功能,会非常简洁方便,毕竟不用重复制造轮子. 我们在Github上可以找到很多基于Vue前端技

方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install echarts --save npm install --save @types/echarts 然后在需要引用echarts的组件中引入echarts <script lang="ts"> …… import echarts from 'echarts'; …… </s

c# 如何找到项目中图片的相对路径 string path = System.Environment.CurrentDirectory;//非Web程序if (System.Environment.CurrentDirectory != AppDomain.CurrentDomain.BaseDirectory){        path = AppDomain.CurrentDomain.BaseDirectory;//asp.net 程序        path += "Image\\Def

1Why? 我们为什么要把Dagger2,MVP以及Rxjava引入项目中? 毫无疑问在Android开发圈中这三个技术是经常被提及的,如此多的文章和开源项目在介绍他们,使用他们,开发者也或多或少的被带动起来在自己的项目中使用他们,但是使用他们之前我们知道为什么要使用他们,他们能给我们带来什么好处吗,还是只是跟随潮流 其实我们大多数项目中是使用不到他们的,或者说对这些技术的需求不是很大,为什么这么说呢? 大多数的开发者其实都是在开发功能模块比较少的小项目,对于这些项目来说,其实使用这些技术带来的

最近项目中需要在图片预览时,可以旋转图片预览,在网上找了下,发现有一款功能强大的图片组件:viewerjs. git-hup: https://github.com/fengyuanchen/viewerjs 在git上看了下,有很多功能,不过我的项目只需要做个图片旋转功能,引入这个组件感觉大材小用了,于是自己写了个简易版的,因为我们只是查看而已,没什么要求.如果你需要比较精确的图片旋转功能,可以使用这个viewerjs组件 功能描述: 一个图片预览框,三个操作按钮: 上一张,下一张,旋转; 点

在Vue前端界面中,自定义组件很重要,也很方便,我们一般是把一些通用的界面模块进行拆分,创建自己的自定义组件,这样操作可以大大降低页面的代码量,以及提高功能模块的开发效率,本篇随笔继续介绍在Vue&Element前端项目中如何使用自定义封装的组件,实现附件的展示场景. 1.界面模块的拆分 Vue的前端界面,对界面内容部分可以根据需要进行适当的拆分,也可以把通用的部分封装为组件进行使用,如我在随笔<循序渐进VUE+Element 前端应用开发(16)--- 组织机构和角色管理模块的处理>

目前Vue项目中对json数据的请求一般使用两个插件vue-resource和axios, 但vue-resource已经不再维护, 而axios是官方推荐的且npm下载量已经170多万,github的Star已经接近4.5万, 再看看vue-resource 但是作为学习笔记,在学习axios的同时也会对比vue-resource的用法. 先看看同域请求 <div class="container"> <h1>vue request</h1> &l

通常,使用测试驱动开发(TDD)最困难的部分是开始.你必须下载带有奇怪依赖项的软件包,让测试套件与你的构建系统协同工作,然后你必须弄清楚如何编写一个测试!难怪这么多的开发者在你提起它的时候就开始跑开了. 但是,你不是一个普通的开发者.你就可以开始就使用TDD与Vue,所以你可以确信你的代码是完全如预期的.现在我们一起在一个新的Vue项目开始测试工作,通过默认的测试,然后添加一些我们自己想做的. 设置 启动TDD的最简单方法是使用Vue-cli工具.如果你还没有使用过它,Vue-cli工具提供了你

在开发前端项目中,字体图标变得越来越常用.一方面因为它比图片使用起来方便,可以像字体一样修改大小和颜色:另一方面是因为它可以减少请求数量,优化前端性能. iconfont的使用方法很简单,主要由三种引入方式:Unicode, Font Class,Symbol.不会的可以去官网看看:https://www.iconfont.cn/ 但是在实际项目中,我们可能会遇到iconfont冲突的问题,简单来说就是某个项目存在多个iconfont资源目录,而且命名没有修改(默认名都是"iconfont&qu

项目环境搭建此处省略,不再赘述,需要的请查阅相关资料. 本篇只介绍,如果在vue+webpack的项目中配置,把px自动转为rem 第一步安装   npm install   postcss-px2rem postcss --save 第二步  在 webpack.base.conf.js中 引入 const webpack = require('webpack') const px2rem = require('postcss-px2rem') const postcss = require(

纸上得来终觉浅,绝知此事要躬行! Vue的文档和教程看的太多,小的demo做的多,也不如自己实际的进行一个完整项目的开发.只有做了才知道原来问题这么多,这里列举了一些你做demo教程可能不会遇见的坑. 一.项目的登录拦截及用户权限访问控制问题. 一个很常见的需求就是对未登录的用户进行路由拦截和用户的权限访问,如果你的项目之前是通过后台控制访问路由的,那么之前的后端现在可能需要在前端也需要控制了,由于我们用vue脚手架搭建的都是纯前端的路由访问,先看看我们的一般的项目路径: 你可能会注意到Vue的

纸上得来终觉浅,绝知此事要躬行! Vue的文档和教程看的太多,小的demo做的多,也不如自己实际的进行一个完整项目的开发.只有做了才知道原来问题这么多,这里列举了一些你做demo教程可能不会遇见的坑. 一.项目的登录拦截及用户权限访问控制问题. 一个很常见的需求就是对未登录的用户进行路由拦截和用户的权限访问,如果你的项目之前是通过后台控制访问路由的,那么之前的后端现在可能需要在前端也需要控制了,由于我们用vue脚手架搭建的都是纯前端的路由访问,先看看我们的一般的项目路径: 你可能会注意到Vue的

组件的形式创建 1.下载依赖 npm install qrcodejs2 2.创建一个.vue的组件放置代码(我创建的是qrcodejs2.vue) //template中的代码 <template> <div class="boxshow"> <div class="qrcode" ref="qrcodeContainer"></div> </div> </template>

.使用介绍: (1)KSImageNamed-Xcode-master的使用 安装该插件后,会对文件中图片进行智能提示.  下载地址:http://yun.baidu.com/s/1qWNkvGK  

1.将Grid++Report安装文件中(\WebSamples\asp.net(csharp)\App_Code)的ReportData.cs,MssqlReportData.cs两个文件复制到自己项目中的App_Code文件中.并配置数据库连接 public const string SqlConnStr = "Data Source=.;Initial Catalog=DBname;Persist Security Info=True;User ID=sa;Password=123;&qu

(ps:以下是我在项目中遇到得问题及解决方法,希望对你们有帮助.如果还有其他方法,可以留言,谢谢) 一个表单页面,使用element-ui中el-upload上传图片,此项为必填项,然后写了校验规则,当不上传图片时,会提示请上传图片,当上传图片后,提示不会消失: 代码如下:  <el-form-item label="XXX" ref="image" prop='imageUrl'>      <el-upload class="avat

使用require将图片进入,写法如下: data: () => ({logo: 'this.src="' + require('../assets/img.png') + '"'}) 注:我是在data里就将字符串拼接好了,当然也可以在onerror方法里拼接,这里就不赘述了. 然后在img的onerror方法中调用 <img v-bind:src="userData.photo" :onerror="logo" class=&qu

引入方式很简单,就是在script下使用require()即可. 因为import 是import...from 的形式,所以是不需要的. <script> import {mapState, mapMutations} from "vuex" import DetailItem from "@components/detail" require('../assets/css/swiper-3.4.1.min.css') export default {

刚开始用vue + webpack新建项目,在github上下载了一个示例,输入npm init >>>npm run dev 后报错 Cannot find module 'chalk' ,提示的意思是没有找到chalk组件: 解决方法:引入chalk组件,因为chalk组件包含于glob中,所以引入glob组件即可,操作如下: 1,在项目根目录下运行 npm install glob -D 2,运行项目 npm run dev