当前位置: 首页 > news >正文

vant金额输入框

1.在components中新建文件夹currency,新建index.js

import Currency from './src/currency.vue'Currency.install = function (Vue) {Vue.component(Currency.name, Currency)
}export default Currency

2.在currency中新建文件夹src,在src中间currency.vue。写入核心代码

<template><van-field v-model="liveValue" :name="name" :placeholder="placeholder" :disabled="disabled" :readonly="readonly" @focus="handleFocus" @blur="handleBlur" @change.native="handleChange" v-bind="$attrs" @keydown.native="handleKeydown"></van-field>
</template><script>
import { formatter, unFormatter, numberKeyCodes, decimalKeyCodes, plusKeyCodes, minusKeyCodes, operKeyCodes } from '../../currentcy.js'
export default {name: 'Sjjcurrency',props: {name: 'String',value: {type: [String, Number],default: ''},format: {type: String,default: '16|2'},placeholder: String,separator: {type: String,default: ','},decimalSymbol: {type: String,default: '.'},disabled: {type: Boolean,default: false},readonly: {type: Boolean,default: false},rounding: {type: Boolean,default: false},appendKeyCodes: Array,preFormatter: Function},components: {UnInput},data () {return {hiddenValue: '', // 合法金额值liveValue: '' // 展示值}},created () {let userFormatVal = this.value + ''if (this.preFormatter) {userFormatVal = this.preFormatter(userFormatVal)}this.liveValue = formatter(userFormatVal + '', this.separator, this.decimalSymbol, this.format, this.integerFormat, this.rounding)this.hiddenValue = unFormatter(this.liveValue, this.separator)},watch: {value (val, oldVal) {let userFormatVal = this.value + ''if (this.preFormatter) {userFormatVal = this.preFormatter(userFormatVal)}this.liveValue = formatter(userFormatVal + '', this.separator, this.decimalSymbol, this.format, this.integerFormat)this.hiddenValue = unFormatter(this.liveValue, this.separator)}},methods: {focus () {let inputInner = this.$el.querySelector('.van-field_control')inputInner.focus()},blur () {let inputInner = this.$el.querySelector('.van-field_control')inputInner.blur()},select () {let inputInner = this.$el.querySelector('.van-field_control')inputInner.select()},handleFocus (event) {this.liveValue = this.hiddenValuethis.$emit('focus', event)},handleBlur (event) {let userFormatVal = this.liveValueif (this.preFormatter) {userFormatVal = this.preFormatter(userFormatVal)}this.liveValue = formatter(userFormatVal + '', this.separator, this.decimalSymbol, this.format, this.integerFormat, this.rounding)this.hiddenValue = unFormatter(this.liveValue, this.separator)this.$emit('input', this.hiddenValue)this.$nextTick(() => {this.$emit('blur', event)})},handleChange (val) {if (/[\u4e00-\u9fa5]/g.test(val)) { // 非IE,忽略可输入的中文val = this.hiddenValue}let userFormatVal = valif (this.preFormatter) {userFormatVal = this.preFormatter(val)}this.liveValue = formatter(userFormatVal + '', this.separator, this.decimalSymbol, this.format, this.integerFormat, this.rounding)this.hiddenValue = unFormatter(this.liveValue, this.separator)this.$emit('input', this.hiddenValue)this.$nextTick(() => {this.$emit('change', this.hiddenValue)})},handleKeydown (event) {if (this.readonly || this.disabled) {return}let keyCode = event.keyCodeif (event.shiftKey) {keyCode = -9 + '' + keyCode}if (event.ctrlKey) {keyCode = -7 + '' + keyCode}// 获取光标位置let cursurPosition = 0let inputInner = this.$el.querySelector('.van-field_control')if (inputInner) {if (inputInner.selectionStart !== null && inputInner.selectionStart !== undefined) {// 非IE、IE11cursurPosition = inputInner.selectionStart} else {// IE10-let range = document.selection.createRange()range.moveStart('character', -inputInner.val().length)cursurPosition = range.text.length}} else {cursurPosition = -1}keyCode = parseInt(keyCode)let allowKeyCodes = [...numberKeyCodes,...decimalKeyCodes,...operKeyCodes,...plusKeyCodes,...minusKeyCodes]if (this.appendKeyCodes && this.appendKeyCodes.length) {allowKeyCodes = allowKeyCodes.concat(this.appendKeyCodes)}// let signalKeyCodes = plusKeyCodes.concat(minusKeyCodes)if (allowKeyCodes.indexOf(keyCode) < 0 || (this.liveValue.indexOf('.') >= 0 && decimalKeyCodes.indexOf(keyCode) >= 0) || ((this.liveValue.indexOf('+') >= 0 || this.liveValue.indexOf('-') >= 0) && minusKeyCodes.indexOf(keyCode) >= 0) || ((this.liveValue.indexOf('+') >= 0 || this.liveValue.indexOf('-') >= 0) && plusKeyCodes.indexOf(keyCode) >= 0) || (cursurPosition > 0 && plusKeyCodes.concat(minusKeyCodes).indexOf(keyCode) >= 0)) {event.preventDefault()} else {if (cursurPosition === 0 && (plusKeyCodes.indexOf(keyCode) >= 0 || minusKeyCodes.indexOf(keyCode) >= 0)) {// if ((this.liveValue.indexOf('-') < 0 && minusKeyCodes.indexOf(keyCode) >= 0) || (this.liveValue.indexOf('+') < 0 && plusKeyCodes.indexOf(keyCode) >= 0)) { // 可输入+if ((this.liveValue.indexOf('-') < 0 && minusKeyCodes.indexOf(keyCode) >= 0)) {// 不可输入+} else {event.preventDefault()}}}}}
}
</script>

3.currentcy.js

import { BigDecimal, RoundingMode } from 'bigdecimal'
export const numberKeyCodes = [44, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105] // 允许的数字键的keyCode
export const decimalKeyCodes = [190, 110] // 小数键的keyCode
export const plusKeyCodes = [107, -9187] // 正号的keyCode 【小键盘+, 187=(配合shift使用)】
export const minusKeyCodes = [109, 189] // 负号的keyCode
export const operKeyCodes = [9, 46, 8, 37, 39, 35, 36, -767, -786] // 操作特殊字符的KeyCodefunction __getIntDigitLength__ (intDigitStr) {let len = {}let intLength = ''let decimalLength = ''intDigitStr = intDigitStr.trim()if (intDigitStr && intDigitStr !== '|' && /^(\d*)\|(\d*)$/g.test(intDigitStr)) {intLength = RegExp.$1decimalLength = RegExp.$2len.intLength = intLengthlen.decimalLength = decimalLengthreturn len} else {return false}
}function __getStringRegExp__ (str) {try {if (str && /[\][{}()*+?.\\^$|]/g.test(str)) {if (str !== '\\') return '\\' + strelse return '\\'} else return str || ''} catch (e) {throw new Error('__getStringRegExp__:' + e.message)}
}function __removeSeparator__ (value, separator) {try {// var _me = thisvar separatorRegExp = __getStringRegExp__(separator) || ''if (separatorRegExp) {var dh = new RegExp(separatorRegExp, 'img')if (value && dh.test(value)) {return value.replace(dh, '')}}return value || ''} catch (e) {throw new Error('__removeSeparator__:' + e.message)}
}export function formatter (value, separator, decimalSymbol, intDigitStr, isIntegerOnly, rounding) {try {// let valueValid = falsevar _currencyValue = {intLength: '16',decimalLength: '2',NegativeValue: '',intValue: '',decimalValue: '',formatValue: ''}value = value + ''if (!value || value === '-' || value === '+') {return ''}// var _me = this,var separatorRegExp, _value, __decimalLen, __intLen // 整数部分var lenObj = __getIntDigitLength__(intDigitStr)if (lenObj) {_currencyValue.intLength = lenObj.intLength_currencyValue.decimalLength = lenObj.decimalLength}__intLen = parseInt(_currencyValue.intLength, 10)__decimalLen = rounding ? parseInt(_currencyValue.decimalLength, 10) + 1 : parseInt(_currencyValue.decimalLength, 10)// var isNegative = false // 是否负数var valArr = /^-([^-]+)$/.exec(value)if (valArr) {// isNegative = true // 表示是负数_currencyValue.NegativeValue = '-'value = valArr[1]}if (separator === '') {return ''}_value = value // 整数部分_currencyValue.decimalValue = '' // 小数部分if (value.indexOf('.') > -1) { // 若含有小数点,则处理得到整数部分和小数部分_currencyValue.decimalValue = value.substring(value.indexOf('.') + 1)_value = value.substring(0, value.indexOf('.'))}// 若未输入整数部分,则自动取成0----------------------------------------------------_value = _value === '' ? '0' : _value// _value === '' ? _value = '0' : _value = _valueif (separator !== '') {separatorRegExp = __getStringRegExp__(separator)_value = __removeSeparator__(_value, separator) // 去分隔符}if (isNaN(_value) || isNaN(_currencyValue.decimalValue) || isNaN(value)) { // 若不是数字则报错,isNaN('')=falsereturn ''}// modify beginif (isIntegerOnly && value.indexOf('.') < 0) { // 纯整数格式化且不含.时,对纯整数进行格式化if (_currencyValue.decimalLength !== '') {if (_value.length > __decimalLen) {_currencyValue.decimalValue = _value.substring(_value.length - __decimalLen)_value = _value.substring(0, _value.length - __decimalLen)} else {var _s = _valuefor (var i = 0; i < (__decimalLen - _value.length); i++) {_s = '0' + _s}_currencyValue.decimalValue = _s_value = '0'}} else {_currencyValue.decimalValue = ''}} else {if (_currencyValue.decimalLength !== '') {if (_currencyValue.decimalValue.length < __decimalLen) {var _d = _currencyValue.decimalValuefor (var j = 0; j < (__decimalLen - _currencyValue.decimalValue.length); j++) {_d += '0'}_currencyValue.decimalValue = _d} else {if (_currencyValue.decimalValue.length > __decimalLen) {// valueValid = false}_currencyValue.decimalValue = _currencyValue.decimalValue.substring(0, __decimalLen)}}}// modify endvar _intVal = _valueif (_currencyValue.intLength !== '') { // 若存在整数位的限制if (_currencyValue.intLength < _intVal.length) {// valueValid = false}_intVal = _intVal.substring(0, __intLen)}_currencyValue.intValue = _value = _intVal// 整数处理完毕 endvar _digitpoint = (_currencyValue.decimalValue ? decimalSymbol : '')let zeroFilter = (_currencyValue.intValue + '').split('').filter(x => {return x !== '0'})if (zeroFilter.length === 0) { // 输入所有位数都是0的情况,设置后直接返回_currencyValue.intValue = '0'let zeroFilterDec = (_currencyValue.decimalValue + '').split('').filter(x => {return x !== '0'})// 去掉输入全部为0时的负号if (zeroFilterDec.length === 0) {_currencyValue.NegativeValue = ''}_currencyValue.formatValue = _currencyValue.NegativeValue + '0' + (_currencyValue.decimalValue !== '' ? (_digitpoint + _currencyValue.decimalValue) : '')if (rounding) {_currencyValue.formatValue = new BigDecimal(_currencyValue.formatValue).setScale(__decimalLen - 1, RoundingMode.HALF_UP()).toString()}return _currencyValue.formatValue}// 处理整数的前缀0if (/^0+/g.test(_currencyValue.intValue) && !(/^(0+)$/g.test(_currencyValue.intValue)) && !(/^0$/g.test(_currencyValue.intValue))) {_currencyValue.intValue = _currencyValue.intValue.replace(/^0+/, '')_value = _intVal = _currencyValue.intValue}if (rounding) {let rVal = _value + _digitpoint + _currencyValue.decimalValuelet roundingVal = new BigDecimal(rVal).setScale(__decimalLen - 1, RoundingMode.HALF_UP()).toString()_value = roundingVal.substring(0, roundingVal.indexOf(_digitpoint))_currencyValue.decimalValue = roundingVal.substring(roundingVal.indexOf(_digitpoint) + 1)}// 整数部分的分隔符处理开始if (separator !== '') {_value = _value + separatorvar re = new RegExp('(\\d)(\\d{3}' + separatorRegExp + ')') // 以3个字符串为一组while (re.test(_value)) {_value = _value.replace(re, '$1' + separator + '$2')}_value = _value.replace(new RegExp(separatorRegExp + '$'), '') // 去掉末尾的分隔符}_currencyValue.formatValue = _currencyValue.NegativeValue + _value + (_currencyValue.decimalValue !== '' ? (_digitpoint + _currencyValue.decimalValue) : '')if (+_currencyValue.formatValue < 0) {// 去除-号return _currencyValue.formatValue.substr(1)} else {return _currencyValue.formatValue}// return _currencyValue.formatValue} catch (e) {throw new Error('formatter', e.message)}
}
export function unFormatter (value, separator) {return (value + '').replace(new RegExp(separator, 'ig'), '')
}

4.然后就是最愉快的代码引入了(代表10位整数6位小数)

<currency v-model="money" :format="10|6" placeholder="请输入内容" />

 

相关文章:

vant金额输入框

1.在components中新建文件夹currency&#xff0c;新建index.js import Currency from ./src/currency.vueCurrency.install function (Vue) {Vue.component(Currency.name, Currency) }export default Currency 2.在currency中新建文件夹src&#xff0c;在src中间currency.v…...

uni-app base64转图片

pathToBase64 pathToBase64(path).then(base64 > {console.log(base64)}).catch(error > {console.error(error)})base64ToPath base64ToPath(base64).then(path > {console.log(path)}).catch(error > {console.error(error)})首先将插件引入项目。按照image-to…...

【webpack】自定义loader

&#x1f4dd;个人主页&#xff1a;爱吃炫迈 &#x1f48c;系列专栏&#xff1a;前端工程化 &#x1f9d1;‍&#x1f4bb;座右铭&#xff1a;道阻且长&#xff0c;行则将至&#x1f497; 文章目录 loaderloader引入方式loader传入/接收参数传入参数接收参数 loader返回值retur…...

【kubernetes】在k8s集群环境上,部署kubesphere

部署kubesphere 学习于尚硅谷kubesphere课程 前置环境配置-部署默认存储类型 这里使用nfs #所有节点安装 yum install -y nfs-utils# 在master节点执行以下命令 echo "/nfs/data/ *(insecure,rw,sync,no_root_squash)" > /etc/exports # 执行以下命令&#xff…...

STM32 F103C8T6学习笔记4:时钟树、滴答计时器、定时器定时中断

今日理解一下STM32F103 C8T6的时钟与时钟系统、滴答计时器、定时器计时中断的配置&#xff0c;文章提供原理&#xff0c;代码&#xff0c;测试工程下载。 目录 时钟树与时钟系统&#xff1a; 滴答计时器&#xff1a; 定时器计时中断&#xff1a; 测试结果&#xff1a; 测…...

代理模式【Proxy Pattern】

什么是代理模式呢&#xff1f;我很忙&#xff0c;忙的没空理你&#xff0c;那你要找我呢就先找我的代理人吧&#xff0c;那代理人总要知道 被代理人能做哪些事情不能做哪些事情吧&#xff0c;那就是两个人具备同一个接口&#xff0c;代理人虽然不能干活&#xff0c;但是被 代…...

Oracle切割字符串的方法,SQL语句完成。

Oracle用正则的方式循环切割字符串 需求&#xff1a;有一个这样子的 Str “‘CNJ-520-180500000001|CNJ-520-181200000001|CNJ-520-190300000001|CNJ-520-190100000001|CNJ-520-181200000002’” &#xff0c;然后我需要拿到每一个单号&#xff0c;每一个单号都要走一遍固定的…...

Https、CA证书、数字签名

Https Http协议 Http协议是目前应用比较多应用层协议&#xff0c;浏览器对于Http协议已经实现。Http协议基本的构成部分有 请求行 &#xff1a; 请求报文的第一行请求头 &#xff1a; 从第二行开始为请求头内容的开始部分。每一个请求头都是由K-V键值对组成。请求体&#xf…...

Jmeter-压测时接口按照顺序执行-临界部分控制器

文章目录 临界部分控制器存在问题 临界部分控制器 在进行压力测试时&#xff0c;需要按照顺序进行压测&#xff0c;比如按照接口1、接口2、接口3、接口4 进行执行 查询结果是很混乱的&#xff0c;如果请求次数少&#xff0c;可能会按照顺序执行&#xff0c;但是随着次数增加&a…...

linux 文件权限识别及其修改

一、文件权限认识 在 Linux 系统中&#xff0c;一切皆文件&#xff0c;目录也是一种文件形式叫目录文件&#xff0c;它们的属性主要包含&#xff1a;索引节点(inode)&#xff0c;类型、权限属性、链接数、所归属的用户和用户组、最近修改时间等内容。 如下为根目录下目录&…...

Java:简单算法:冒泡排序、选择排序、二分查找

冒泡排序 // 1、准备一个数组 int[] arr {5&#xff0c;2&#xff0c;3&#xff0c;1};//2、定义一个循环控制排几轮 for (int i 0; i < arr.length - 1; i) { // i 0 1 2 【5&#xff0c;2&#xff0c;3&#xff0c;1】 次数 // i 0 第一轮 0 1 2 …...

C、C++项目中 configure、makefile.am、makefile.in、makefile 之间的关系

一、configure、makefile.am、makefile.in、makefile 之间的关系 这四个文件都是与 GNU Make&#xff08;一个用于管理程序的编译和安装过程的工具&#xff09;有关的文件&#xff0c;它们的关系如下&#xff1a; configure&#xff1a;是一个脚本文件&#xff0c;用于根据系统…...

【网络】传输层——UDP | TCP(协议格式确认应答超时重传连接管理)

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《网络》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 现在是传输层&#xff0c;在应用层中的报文(报头 有效载荷)就不能被叫做报文了&#xff0c;而是叫做数…...

198.打家劫舍 ● 213.打家劫舍II ● 337.打家劫舍III

198.打家劫舍 class Solution { public:int rob(vector<int>& nums) {if(nums.size()0)return 0;if(nums.size()1)return nums[0];vector<int>dp(nums.size());dp[0]nums[0];dp[1]max(nums[0],nums[1]);for(int i2;i<nums.size();i)dp[i]max(dp[i-1],dp[i-…...

ArcGIS Maps SDK for JavaScript系列之一:在Vue3中加载ArcGIS地图

目录 ArcGIS Maps SDK for JavaScript简介ArcGIS Maps SDK for JavaScript 4.x 的主要特点和功能AMD modules 和 ES modules两种方式比较Vue3中使用ArcGIS Maps SDK for JavaScript的步骤创建 Vue 3 项目安装 ArcGIS Maps SDK for JavaScript创建地图组件 ArcGIS Maps SDK for …...

服务器扩展未生效

服务器扩容未生效 在阿里云付费扩容后&#xff0c;在服务器里面看未生效。 阿里云->实例与镜像->实例->选择实例->云盘->扩容进入linux服务器查看&#xff1a; df -h vda1扩容未生效。原40g->扩容后100g 解决方法&#xff1a; 1、安装growpart yum inst…...

Jenkins构建自由风格项目发布jar到服务器

前面的文章有介绍 docker安装jenkins 和 dockerjenkins发布spring项目&#xff1b;这里就不做过多的介绍&#xff0c;直接说明构建步骤。 1、选择构建一个自由风格的项目 2、 选择丢弃旧的构建 3、配置Git信息 4、构建触发器 和 构建环境可以直接跳过 5、直接来到Build Step…...

Rabbitmq延迟消息

目录 一、延迟消息1.基于死信实现延迟消息1.1 消息的TTL&#xff08;Time To Live&#xff09;1.2 死信交换机 Dead Letter Exchanges1.3 代码实现 2.基于延迟插件实现延迟消息2.1 插件安装2.2 代码实现 3.基于延迟插件封装消息 一、延迟消息 延迟消息有两种实现方案&#xff…...

miniExcel 生成excel

一、nuget dotnet add package MiniExcel --version 1.31.2 二、新建表及数据 ExampleProducts 三、这里我用了Dapper.Query方法 读取excel public virtual async Task<IActionResult> Anonymous(){try{//using (var connection _dbContext.GetDbConnection())//{//…...

Handler详解

跟Handler有关系的&#xff0c;包括Thread&#xff0c;Looper&#xff0c;Handler&#xff0c;MessageQueue Looper: 由于Looper是android包加入的类&#xff0c;而Thread是java包的类&#xff0c;所以&#xff0c;想要为Thread创建一个Looper&#xff0c;需要在线程内部调用…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

Java数组Arrays操作全攻略

Arrays类的概述 Java中的Arrays类位于java.util包中&#xff0c;提供了一系列静态方法用于操作数组&#xff08;如排序、搜索、填充、比较等&#xff09;。这些方法适用于基本类型数组和对象数组。 常用成员方法及代码示例 排序&#xff08;sort&#xff09; 对数组进行升序…...

【Ftrace 专栏】Ftrace 参考博文

ftrace、perf、bcc、bpftrace、ply、simple_perf的使用Ftrace 基本用法Linux 利用 ftrace 分析内核调用如何利用ftrace精确跟踪特定进程调度信息使用 ftrace 进行追踪延迟Linux-培训笔记-ftracehttps://www.kernel.org/doc/html/v4.18/trace/events.htmlhttps://blog.csdn.net/…...