uniapp自定义picker城市多级联动组件

  • 支持多端——h5、app、微信小程序、支付宝小程序...
  • 支持自定义配置picker插件级数
  • 支持无限级

注意事项：插件传入数据格式为children树形格式，内部包含：id、name

参数 类型 描述 默认值 必选
title string 标题 '' 否
layer number 控制几级联动 1 否
data arr 数据 如：[{text: '', adcode: '', children: [{text: '', adcode: ''}]}] [] 否

组件运行图示：

组件选择后返回数据如：

引用示例：

  1. <template>
  2. 	<view class="content">
  3. 		<view class="aui-content" :style="{height: contentHeight}">
  4. 			<view class="aui-btn aui-btn-blue" @click.stop="showPicker($event)">picker无限级联动</view>
  5. 		</view>
  6. 		<aui-picker
  7. 			ref="picker"
  8. 			:title="auiPicker.title"
  9. 			:layer="auiPicker.layer"
  10. 			:data="auiPicker.data"
  11. 			@callback="pickerCallback"
  12. 		></aui-picker>
  13. 	</view>
  14. </template>
  16. <script>
  17. 	import auiPicker from '@/components/aui-picker/aui-picker.vue';
  18. 	export default {
  19. 		components: {
  20. 			auiPicker
  21. 		},
  22. 		data() {
  23. 			return {
  24. 				auiPicker: {
  25. 					title: 'picker多级联动',
  26. 					layer: null,
  27. 					data: []
  28. 				},
  29. 			}
  30. 		},
  31. 		created(){
  33. 		},
  34. 		mounted() {
  36. 		},
  37. 		methods: {
  38. 			//显示picker多级联动弹窗
  39. 			showPicker(e){
  40. 				const _this = this;
  41. 				_this.auiPicker.data=[{
  42. 					id: "1001",
  43. 					name: "一级菜单1",
  44. 					children: [{
  45. 						id: "1002",
  46. 						name: "二级菜单1-1",
  47. 						children: [{
  48. 							id: "1003",
  49. 							name: "三级菜单1-1",
  50. 							children: [{
  51. 								id: "1004",
  52. 								name: "四级菜单1-1"
  53. 							}]
  54. 						}]
  55. 					}]
  56. 				},
  57. 				{
  58. 					id: "1005",
  59. 					name: "一级菜单2",
  60. 					children: [{
  61. 						id: "1006",
  62. 						name: "二级菜单2-1",
  63. 						children: [{
  64. 							id: "1007",
  65. 							name: "三级菜单2-1",
  66. 							children: [{
  67. 								id: "1008",
  68. 								name: "四级菜单2-1"
  69. 							}]
  70. 						}]
  71. 					}]
  72. 				}];
  73. 				_this.$refs.picker.open().then(function(){
  74. 					console.log('picker打开');
  75. 				});
  76. 			},
  77. 			//picker多级联动回调
  78. 			pickerCallback(e){
  79. 				const _this = this;
  80. 				console.log(e);
  81. 				let result = '';
  82. 				e.data.forEach(function(item, index){
  83. 					result += item.name + '   ';
  84. 				});
  85. 				uni.showModal({
  86. 				    title: '提示',
  87. 				    content: result,
  88. 				    success: function (res) {
  89. 				        if (res.confirm) {
  90. 				            console.log('用户点击确定');
  91. 				        } else if (res.cancel) {
  92. 				            console.log('用户点击取消');
  93. 				        }
  94. 				    }
  95. 				});
  96. 			}
  97. 		}
  98. 	}
  99. </script>
  101. <style>
  102. 	.aui-content{padding: 15px 0 0 0;}
  103. </style>

aui-picker组件完整代码：

项目components文件夹下创建aui-picker夹，此文件夹下创建aui-picker.vue——多级联动组件

  1. <template name="aui-picker">
  2. 	<view class="aui-picker" v-if="SHOW" :class="{
  3. 		'aui-picker-in': FADE==1,
  4. 		'aui-picker-out': FADE==0}"
  5. 	>
  6. 		<view class="aui-mask" @click.stop="close"></view>
  7. 		<view class="aui-picker-main">
  8. 	        <view class="aui-picker-header">
  9. 	            <view class="aui-picker-title" v-if="title">{{title}}</view>
  10. 	            <view class="aui-picker-close iconfont iconclose" @click.stop="close"></view>
  11. 	        </view>
  12. 	        <view class="aui-picker-nav">
  13. 				<view class="aui-picker-navitem"
  14. 					v-if="nav.length>0"
  15. 					v-for="(item, index) in nav"
  16. 					:key="index"
  17. 					:data-index="index"
  18. 					:class="[index==navCurrentIndex ? 'active' : '', 'aui-picker-navitem-'+index]"
  19. 					:style="{margin: nav.length>2 ? '0 10px 0 0' : '0 30px 0 0'}"
  20. 					@click.stop="_changeNav($event)"
  21. 				>{{item.name}}</view>
  22. 				<view class="aui-picker-navitem"
  23. 					:key="nav.length"
  24. 					:data-index="nav.length"
  25. 					:class="[nav.length==navCurrentIndex ? 'active' : '', 'aui-picker-navitem-'+nav.length]"
  26. 					:style="{margin: nav.length>2 ? '0 10px 0 0' : '0 30px 0 0'}"
  27. 					@click.stop="_changeNav($event)"
  28. 				>请选择</view>
  29. 				<view class="aui-picker-navborder" :style="{left: navBorderLeft+'px'}"></view>
  30. 			</view>
  31. 	        <view class="aui-picker-content">
  32. 	            <view class="aui-picker-lists">
  33. 					<view class="aui-picker-list"
  34. 						v-for="(list, index) in queryItems.length + 1"
  35. 						:key="index"
  36. 						:data-index="index"
  37. 						:class="[index==navCurrentIndex ? 'active' : '']"
  38. 					>
  39. 						<view class="aui-picker-list-warp" v-if="index == 0">
  40. 							<view class="aui-picker-item"
  41. 								v-for="(item, key) in items"
  42. 								v-if="item.pid=='0'"
  43. 								:key="key"
  44. 								:data-pindex="index"
  45. 								:data-index="key"
  46. 								:data-id="item.id"
  47. 								:data-pid="item.pid"
  48. 								:data-name="item.name"
  49. 								:class="{'active': result.length>index && result[index].id==item.id}"
  50. 								:style="{'background': touchConfig.index==key && touchConfig.pindex==index ? touchConfig.style.background : ''}"
  51. 								@click.stop="_chooseItem($event)"
  52. 								@touchstart="_btnTouchStart($event)"
  53. 								@touchmove="_btnTouchEnd($event)"
  54. 								@touchend="_btnTouchEnd($event)"
  55. 							>{{item.name}}</view>
  56. 						</view>
  57. 						<view class="aui-picker-list-warp" v-else>
  58. 							<view class="aui-picker-item"
  59. 								v-for="(item, key) in queryItems[index-1]"
  60. 								:key="key"
  61. 								:data-pindex="index"
  62. 								:data-index="key"
  63. 								:data-id="item.id"
  64. 								:data-pid="item.pid"
  65. 								:data-name="item.name"
  66. 								:class="{'active': result.length>index && result[index].id==item.id}"
  67. 								:style="{'background': touchConfig.index==key && touchConfig.pindex==index ? touchConfig.style.background : ''}"
  68. 								@click.stop="_chooseItem($event)"
  69. 								@touchstart="_btnTouchStart($event)"
  70. 								@touchmove="_btnTouchEnd($event)"
  71. 								@touchend="_btnTouchEnd($event)"
  72. 							>{{item.name}}</view>
  73. 						</view>
  74. 					</view>
  75. 				</view>
  76. 	        </view>
  77. 		</view>
  78. 	</view>
  79. </template>
  81. <script>
  82. 	export default {
  83. 		name: 'aui-picker',
  84. 		props: {
  85. 			title: { //标题
  86. 				type: String,
  87. 				default: ''
  88. 			},
  89. 			layer: { //控制几级联动,默认无限级(跟随数据有无下级)
  90. 				type: Number,
  91. 				default: null
  92. 			},
  93. 			data: { //数据 如：[{id: '', name: '', children: [{id: '', name: ''}]}]
  94. 				type: Array,
  95. 				default (){
  96. 					return [
  97. 						// [{id: '', name: '', children: [{id: '', name: ''}]}]
  98. 					]
  99. 				}
  100. 			}
  101. 		},
  102. 		data(){
  103. 			return {
  104. 				SHOW: false,
  105. 				FADE: -1,
  106. 				nav: [],
  107. 				items: [],
  108. 				queryItems: [],
  109. 				navCurrentIndex: 0,
  110. 				navBorderLeft: 40,
  111. 				result: [],
  112. 				touchConfig: {
  113. 					index: -1,
  114. 					pindex: -1,
  115. 					style: {
  116. 						color: '#197DE0',
  117. 						background: '#EFEFEF'
  118. 					}
  119. 				}
  120. 			}
  121. 		},
  122. 		created(){
  123. 			const _this = this;
  124. 		},
  125. 		watch:{
  126. 			data(){
  127. 				const _this = this;
  128. 				const data = _this.data;
  129. 				_this.items = _this._flatten(data, '0')
  130. 	　　　　}　　
  131. 	　　},
  132. 		mounted(){
  134. 		},
  135. 		methods:{
  136. 			// 打开
  137. 			open(){
  138. 				const _this = this;
  139. 				_this.reset(); //打开时重置picker
  140. 				return new Promise(function(resolve, reject){
  141. 					_this.SHOW = true;
  142. 					_this.FADE = 1;
  143. 					resolve();
  144. 				});
  145. 			},
  146. 			// 关闭
  147. 			close(){
  148. 				const _this = this;
  149. 				return new Promise(function(resolve, reject){
  150. 					_this.FADE = 0;
  151. 					const _hidetimer = setTimeout(()=>{
  152. 						_this.SHOW = false;
  153. 						_this.FADE = -1;
  154. 						clearTimeout(_hidetimer);
  155. 						resolve();
  156. 					},100)
  157. 				});
  158. 			},
  159. 			//重置
  160. 			reset(){
  161. 				const _this = this;
  162. 				_this.queryItems = [];
  163. 				_this.nav = [];
  164. 				_this.navBorderLeft = 40;
  165. 				_this.navCurrentIndex = 0;
  166. 				_this.result = [];
  167. 			},
  168. 			//导航栏切换
  169. 			_changeNav(e){
  170. 				const _this = this;
  171. 				const index = Number(e.currentTarget.dataset.index);
  172. 				_this.navCurrentIndex = index;
  173. 				const _el = uni.createSelectorQuery().in(this).select(".aui-picker-navitem-"+index);
  174. 				_el.boundingClientRect(data => {
  175. 					_this.navBorderLeft = data.left + 20;
  176. 				}).exec();
  177. 			},
  178. 			//数据选择
  179. 			_chooseItem(e){
  180. 				const _this = this;
  181. 				const id = e.currentTarget.dataset.id;
  182. 				const name = e.currentTarget.dataset.name;
  183. 				const pid = e.currentTarget.dataset.pid;
  184. 				const _arr = [];
  185. 				_this.result[_this.navCurrentIndex] = {id: id, name: name, pid: pid};
  186. 				if(
  187. 					(!_this._isDefine(_this.layer) && _this._isDefine(_this._deepQuery(_this.data, id).children))
  188. 					||
  189. 					(_this.navCurrentIndex < (Number(_this.layer) - 1) && _this._isDefine(_this._deepQuery(_this.data, id).children))
  190. 				)
  191. 				{ //有下级数据
  192. 					_this._deepQuery(_this.data, id).children.forEach(function(item, index){
  193. 						_arr.push({id: item.id, name: item.name, pid: id});
  194. 					});
  195. 					if(_this.navCurrentIndex == _this.queryItems.length)
  196. 					{ //选择数据
  197. 						_this.queryItems.push(_arr);
  198. 						_this.nav.push({name: name});
  199. 					}
  200. 					else
  201. 					{ //重新选择数据
  202. 						_this.queryItems.splice(_this.navCurrentIndex+1, 1);
  203. 						_this.nav.splice(_this.navCurrentIndex+1, 1);
  204. 						_this.queryItems.splice(_this.navCurrentIndex, 1, _arr);
  205. 						_this.nav.splice(_this.navCurrentIndex, 1, {name: name});
  206. 					}
  207. 					_this.navCurrentIndex = _this.navCurrentIndex + 1;
  208. 					const _el = uni.createSelectorQuery().in(this).select(".aui-picker-navitem-"+_this.navCurrentIndex);
  209. 					setTimeout(()=>{
  210. 						_el.boundingClientRect(data => {
  211. 							_this.navBorderLeft = data.left + 20;
  212. 						}).exec();
  213. 					},100)
  214. 				}
  215. 				else
  216. 				{ //无下级数据
  217. 					_this.close().then(()=>{
  218. 						_this.$emit("callback", {status: 0, data: _this.result});
  219. 					});
  220. 				}
  221. 			},
  222. 			//递归遍历——将树形结构数据转化为数组格式
  223. 			_flatten(tree, pid) {
  224. 				return tree.reduce((arr, {id, name, children = []}) =>
  225. 				arr.concat([{id, name, pid}], this._flatten(children, id)), [])
  226. 			},
  227. 			//根据id查询对应的数据(如查询id=10100对应的对象)
  228. 			_deepQuery(tree, id) {
  229. 			    let isGet = false;
  230. 			    let retNode = null;
  231. 			    function deepSearch(tree, id){
  232. 			        for(let i = 0; i < tree.length; i++) {
  233. 			            if(tree[i].children && tree[i].children.length > 0) {
  234. 			                deepSearch(tree[i].children, id);
  235. 			            }
  236. 			            if(id === tree[i].id || isGet) {
  237. 			                isGet||(retNode = tree[i]);
  238. 			                isGet = true;
  239. 			                break;
  240. 			            }
  241. 			        }
  242. 			    }
  243. 			    deepSearch(tree, id);
  244. 			    return retNode;
  245. 			},
  246. 			/***判断字符串是否为空
  247. 			   @param {string} str 变量
  248. 			   @example: aui.isDefine("变量");
  249. 			*/
  250. 			_isDefine(str){
  251. 				if (str==null || str=="" || str=="undefined" || str==undefined || str=="null" || str=="(null)" || str=='NULL' || typeof (str)=='undefined'){
  252. 					return false;
  253. 				}else{
  254. 					str = str + "";
  255. 					str = str.replace(/\s/g, "");
  256. 					if (str == ""){return false;}
  257. 					return true;
  258. 				}
  259. 			},
  260. 			_btnTouchStart(e){
  261. 				const _this = this,
  262. 					index = Number(e.currentTarget.dataset.index),
  263. 					pindex = Number(e.currentTarget.dataset.pindex);
  264. 				_this.touchConfig.index = index;
  265. 				_this.touchConfig.pindex = pindex;
  266. 			},
  267. 			_btnTouchEnd(e){
  268. 				const _this = this,
  269. 					index = Number(e.currentTarget.dataset.index),
  270. 					pindex = Number(e.currentTarget.dataset.pindex);
  271. 				_this.touchConfig.index = -1;
  272. 				_this.touchConfig.pindex = -1;
  273. 			},
  274. 		}
  275. 	}
  276. </script>
  278. <style scoped>
  279. 	/* ====================
  280. 		多级联动弹窗
  281. 	 =====================*/
  282. 	.aui-picker{
  283. 		width: 100vw;
  284. 		height: 100vh;
  285. 		opacity: 0;
  286. 		position: fixed;
  287. 		top: 0;
  288. 		left: 0;
  289. 		z-index: 999;
  290. 		/* display: none; */
  291. 	}
  292. 	.aui-picker.aui-picker-in{
  293. 		-moz-animation: aui-fade-in .1s ease-out forwards;
  294. 		-ms-animation: aui-fade-in .1s ease-out forwards;
  295. 		-webkit-animation: aui-fade-in .1s ease-out forwards;
  296. 		animation: aui-fade-in .1s ease-out forwards;
  297. 	}
  298. 	.aui-picker.aui-picker-out{
  299. 		-moz-animation: aui-fade-out .1s ease-out forwards;
  300. 		-ms-animation: aui-fade-out .1s ease-out forwards;
  301. 		-webkit-animation: aui-fade-out .1s ease-out forwards;
  302. 		animation: aui-fade-out .1s ease-out forwards;
  303. 	}
  304. 	.aui-picker-main{
  305. 		width: 100vw;
  306. 		height: 50vh;
  307. 		background: #FFF;
  308. 		border-radius: 15px 15px 0 0;
  309. 		position: absolute;
  310. 		left: 0px;
  311. 		bottom: -50vh;
  312. 		z-index: 999;
  313. 	}
  314. 	.aui-picker.aui-picker-in .aui-picker-main{
  315. 		-moz-animation: aui-slide-up-screen .2s ease-out forwards;
  316. 		-ms-animation: aui-slide-up-screen .2s ease-out forwards;
  317. 		-webkit-animation: aui-slide-up-screen .2s ease-out forwards;
  318. 		animation: aui-slide-up-screen .2s ease-out forwards;
  319. 	}
  320. 	.aui-picker.aui-picker-out .aui-picker-main{
  321. 		-moz-animation: aui-slide-down-screen .2s ease-out forwards;
  322. 		-ms-animation: aui-slide-down-screen .2s ease-out forwards;
  323. 		-webkit-animation: aui-slide-down-screen .2s ease-out forwards;
  324. 		animation: aui-slide-down-screen .2s ease-out forwards;
  325. 	}
  326. 	.aui-picker-header{
  327. 		width: 100%;
  328. 		min-height: 50px;
  329. 		position: relative;
  330. 		z-index: 999;
  331. 		background: #F2F2F2;
  332. 		border-radius: 15px 15px 0 0;
  333. 	}
  334. 	.aui-picker-header::after{
  335. 		content: '';
  336. 		width: 100%;
  337. 		height: 1px;
  338. 		background: rgba(100,100,100,.3);
  339. 		-moz-transform: scaleY(.3);
  340. 		-ms-transform: scaleY(.3);
  341. 		-webkit-transform: scaleY(.3);
  342. 		transform: scaleY(.3);
  343. 		position: absolute;
  344. 		left: 0;
  345. 		bottom: 0;
  346. 		z-index: 999;
  347. 	}
  348. 	.aui-picker-title{
  349. 		line-height: 20px;
  350. 		text-align: center;
  351. 		font-size: 17px;
  352. 		color: #333;
  353. 		padding: 15px;
  354. 		box-sizing: border-box;
  355. 		position: absolute;
  356. 		left: 50px;
  357. 		right: 50px;
  358. 		top: 0;
  359. 	}
  360. 	.aui-picker-close.iconfont{
  361. 		width: 50px;
  362. 		height: 50px;
  363. 		line-height: 50px;
  364. 		text-align: center;
  365. 		font-size: 20px;
  366. 		color: #aaa;
  367. 		border-radius: 0 10px 0 0;
  368. 		position: absolute;
  369. 		right: 0;
  370. 		top: 0;
  371. 	}
  372. 	.aui-picker-content{
  373. 		width: 100%;
  374. 		height: -webkit-calc(100% - 100px);
  375. 		height: calc(100% - 100px);
  376. 	}
  377. 	.aui-picker-nav{
  378. 		width: 100%;
  379. 		height: 50px;
  380. 		text-align: left;
  381. 		padding: 0 20px;
  382. 		margin: 0 0 1px 0;
  383. 		justify-content: flex-start;
  384. 		white-space: nowrap;
  385. 		box-sizing: border-box;
  386. 		position: relative;
  387. 	}
  388. 	.aui-picker-nav::after{
  389. 		content: '';
  390. 		width: 100%;
  391. 		height: 1px;
  392. 		background: rgba(100,100,100,.3);
  393. 		-moz-transform: scaleY(.3);
  394. 		-ms-transform: scaleY(.3);
  395. 		-webkit-transform: scaleY(.3);
  396. 		transform: scaleY(.3);
  397. 		position: absolute;
  398. 		left: 0;
  399. 		bottom: 0;
  400. 		z-index: 999;
  401. 	}
  402. 	.aui-picker-navitem{
  403. 		width: 80px;
  404. 		line-height: 50px;
  405. 		font-size: 16px;
  406. 		margin: 0 30px 0 0;
  407. 		text-align: center;
  408. 		display: inline-block;
  409. 		overflow: hidden;
  410. 		white-space: nowrap;
  411. 		text-overflow: ellipsis;
  412. 	}
  413. 	.aui-picker-navitem.active{
  414. 		color: #197DE0;
  415. 	}
  416. 	.aui-picker-navborder{
  417. 		width: 40px;
  418. 		height: 3px;
  419. 		background: #197DE0;
  420. 		border-radius: 5px;
  421. 		transition: left .15s;
  422. 		position: absolute;
  423. 		left: 40px;
  424. 		bottom: 0;
  425. 	}
  426. 	.aui-picker-lists{
  427. 		width: 100%;
  428. 		height: 100%;
  429. 		justify-content: space-around;
  430. 		white-space: nowrap;
  431. 	}
  432. 	.aui-picker-list{
  433. 		width: 100%;
  434. 		height: 100%;
  435. 		overflow: hidden;
  436. 		overflow-y: scroll;
  437. 		display: none;
  438. 		vertical-align: top;
  439. 	}
  440. 	.aui-picker-list.active{
  441. 		display: inline-block;
  442. 	}
  443. 	.aui-picker-list-warp{
  444. 		width: 100%;
  445. 		height: auto;
  446. 		box-sizing: border-box;
  447. 		padding: 15px 0;
  448. 		display: inline-block;
  449. 	}
  450. 	.aui-picker-item{
  451. 		width: 100%;
  452. 		height: 50px;
  453. 		line-height: 50px;
  454. 		padding: 0 15px;
  455. 		box-sizing: border-box;
  456. 		font-size: 15px;
  457. 		color: #333;
  458. 		position: relative;
  459. 	}
  460. 	.aui-picker-item.active{
  461. 		color: #197DE0;
  462. 	}
  463. 	.aui-picker-item.active::after{
  464. 		content: '';
  465. 		font-size: 15px;
  466. 		color: #197DE0;
  467. 		position: absolute;
  468. 		top: 0px;
  469. 		right: 10px;
  470. 	}
  472. </style>

uniapp自定义picker城市多级联动组件的更多相关文章

  1. vue城市三级联动组件 vue-area-linkage

    Install the pkg with npm: // v5之前的版本 npm i --save vue-area-linkage // v5及之后的版本 npm i --save vue-area ...

  2. mpvue + 微信小程序 picker 实现自定义多级联动 超简洁

    微信小程序官网只提供了省市区的三级联动,实际开发中更多的是自定义的多级联动: 依照微信小程序官网提供的自定义多级联动,需要使用到picker 的多列选择器,即设置 mode = multiSelect ...

  3. 基于uniapp自定义Navbar+Tabbar组件「兼容H5+小程序+App端Nvue」

    uni-app跨端自定义navbar+tabbar组件|沉浸式导航条|仿咸鱼凸起标签栏 在跨端项目开发中,uniapp是个不错的框架.采用vue.js和小程序语法结构,使得入门开发更容易.拥有非常丰富 ...

  4. uni-app自定义Modal弹窗组件|仿ios、微信弹窗效果

    介绍 uniapp自定义弹窗组件uniPop,基于uni-app开发的自定义模态弹窗|msg信息框|alert对话框|confirm确认框|toast弱提示框 支持多种动画效果.多弹窗类型ios/an ...

  5. 微信小程序-多级联动

    微信小程序中的多级联动 这里用到的案例是城市选择器 先上代码: .wxml <view class="{{boxHide}}"> <view>{{nian} ...

  6. js 多级联动（省、市、区）

      js 多级联动(省.市.区) CreateTime--2018年4月9日17:10:38 Author:Marydon 方式一: 数据从数据库获取,ajax实现局部刷新 方式二: 数据从json文 ...

  7. jQuery制作简洁的多级联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

  8. vue移动端地址三级联动组件(一)

    vue移动端地区三级联动 省,市,县.用的vue+mintUi 因为多级联动以及地区的规则比较多.正好有时间自己写了一个.有问题以及建议欢迎指出.涉及到dom移动,所以依赖vue+jquery.这边数 ...

  9. C/C++ Qt 数据库与ComBox多级联动

    Qt中的SQL数据库组件可以与ComBox组件形成多级联动效果,在日常开发中多级联动效果应用非常广泛,例如当我们选择指定用户时,我们让其在另一个ComBox组件中列举出该用户所维护的主机列表,又或者当 ...

随机推荐

  1. 循序渐进VUE+Element 前端应用开发(23）--- 基于ABP实现前后端的附件上传，图片或者附件展示管理

    在我们一般系统中,往往都会涉及到附件的处理,有时候附件是图片文件,有时候是Excel.Word等文件,一般也就是可以分为图片附件和其他附件了,图片附件可以进行裁剪管理.多个图片上传管理,及图片预览操作 ...

  2. Linux下如何使用X86 CPU的GPIO

    目录 1.前言 2.linux pinctrl子系统 3. pin controller driver 4.手动构造device 1.前言 在arm嵌入式开发中,各个外设具有固定的物理地址,我们可以直 ...

  3. 【故障公告】访问高峰数据库服务器 CPU 100% 引发全站故障

    今天上午11:10,我们又中"奖"了,我们使用的阿里云 RDS 实例(SQL Server 2016 标准版,16核32G)突发出现 CPU 100%,引发全站故障,直到 12:1 ...

  4. windows搭建ftp

    控制面板                此时输入电脑用户名和密码可在自己电脑访问,但是其它电脑不能访问 接下来防火墙允许的应用将FTP服务器打钩 控制面板\系统和安全\Windows Defender ...

  5. WC2019 自闭记

    不咕了 Day 1 2019/1/24 辣么快就到冬令营了,还沉迷于被柿子吊打的状态的菜鸡一时半会还反应不过来.我们学校这次分头去的冬令营,差点上不了车.这次做的动车居然直达广州,强啊. 然鹅还是到太 ...

  6. 说说 C# 9 新特性的实际运用

    你一定会好奇:"老周,你去哪开飞机了?这么久没写博客了." 老周:"我买不起飞机,开了个铁矿,挖了一年半的石头.谁知铁矿垮了,压死了几条蜈蚣,什么也没挖着." ...

  7. 【SpringCloud】07.应用间的通信

    应用间通信 HTTP vs RPC Spring Cloud (HTTP) Dubbo (RPC) 1.SpringCloud中服务间两种restful调用方式 RestTemplate Feign ...

  8. php之cms后台文章管理及显示

    public function index(){ C('TOKEN_ON',false);//关闭表单令牌 读取配置 //查询指定id的栏目信息 $id=I('get.id');//类别ID $top ...

  9. 剑指Offer-Python(6-10)

    6.旋转数组的最小数字 class Solution: def minNumberInRotateArray(self, rotateArray): l = len(rotateArray) if l ...

  10. javaweb项目中jsp的from表单提交action内容与web.xml的servlet-mapping对应

    login.jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> ...