Skip to content

H
hls-easy-ui
Commit 63a57615 authored by JingChao's avatar JingChao
Browse files
Options

keyboard

parents 21154140 154e58b9
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 6092 additions and 946 deletions
README.md
View file @ 63a57615
......@@ -461,14 +461,14 @@ showActionSheetButton() {
### s-tab 切换
```html
<div class="local-region">
<s-tab @tabClick="stabClick" :show-divider="true">
<s-tab @tabClick="stabClick" :show-divider="true" has-border="true">
<tab-item>测试</tab-item>
<tab-item>你好</tab-item>
<tab-item>再见</tab-item>
<tab-item>按钮</tab-item>
</s-tab>
<s-tab @tabClick="stabClick" position="bottom" cusClass='class' :default-active="2">
<s-tab @tabClick="stabClick" cusClass='class' :default-active="2">
<tab-item><img src="../assets/image/myInfo/about@2x.png"></tab-item>
<tab-item><img src="../assets/image/myInfo/version@2x.png"></tab-item>
<tab-item><img src="../assets/image/myInfo/setting@2x.png"></tab-item>
......@@ -530,3 +530,27 @@ showActionSheetButton() {
},
```
### Note
hls-easy-ui#0.0.5
[添加金额输入框 currency-input](/packages/components/CurrencyInput/README.md)
[添加动态配置组件 h-layout](/packages/components/HLayout/README.md)
hls-easy-ui#0.0.4
[添加懒加载组建](https://github.com/hilongjw/vue-lazyload)
[添加文件选择组建 h-file](/packages/components/HFile/README.md)
[添加单选框组建 h-radio](/packages/components/Radio/README.md)
[添加checkBox组建](/packages/components/CheckBox/README.md)
[修改原有的check-box组建名为h-switch](/packages/components/Switch/README.md)
hls-easy-ui#0.0.3
添加ios下content的has-footer样式用于content高度在100%是滑动不到底部的问题
修复 s-tab分割线以及活跃状态下底部边线的样式
build/webpack.lib.conf.js
View file @ 63a57615
......@@ -9,6 +9,13 @@ const CleanWebpackPlugin = require('clean-webpack-plugin')
const env = require('../config/prod.env')
const webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: true,
extract: true,
usePostCSS: false
})
},
entry: {
hlsuis: path.resolve(__dirname, '../packages/index.js'),
},
......@@ -28,6 +35,7 @@ const webpackConfig = merge(baseWebpackConfig, {
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env,
'$config': env,
}),
// extract css into its own file
new ExtractTextPlugin({
......
index.html
View file @ 63a57615
......@@ -9,11 +9,14 @@
<!-- safari私有meta标签 允许全屏模式浏览 指定safari顶部状态栏样式(黑色) -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script type="text/javascript" src="./static/vuePlatform.js"></script>
<script type="text/javascript" src="../../cordova.js"></script>
<title>车租易</title>
</head>
<body>
<div id="app-box"></div>
<!-- built files will be auto injected -->
<div id="app-box">
<img width="100%" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzUwIiBoZWlnaHQ9IjEzMzQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8Zz4KICA8cmVjdCBmaWxsPSIjZmZmIiBpZD0iY2FudmFzX2JhY2tncm91bmQiIGhlaWdodD0iMTMzNCIgd2lkdGg9Ijc1MCIgeT0iLTEiIHg9Ii0xIi8+CiAgPGcgZGlzcGxheT0ibm9uZSIgb3ZlcmZsb3c9InZpc2libGUiIHk9IjAiIHg9IjAiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIGlkPSJjYW52YXNHcmlkIj4KICAgPHJlY3QgZmlsbD0idXJsKCNncmlkcGF0dGVybikiIHN0cm9rZS13aWR0aD0iMCIgeT0iMCIgeD0iMCIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIvPgogIDwvZz4KIDwvZz4KIDxnPgogIDxyZWN0IG9wYWNpdHk9IjAuNyIgc3Ryb2tlPSIjMDAwIiBpZD0ic3ZnXzEiIGhlaWdodD0iMjAwIiB3aWR0aD0iNjU2IiB5PSI4OSIgeD0iNDYiIHN0cm9rZS13aWR0aD0iMCIgZmlsbD0iI0RERERERCIvPgogIDxlbGxpcHNlIG9wYWNpdHk9IjAuNyIgc3Ryb2tlPSIjMDAwIiByeT0iNTAiIHJ4PSI1MCIgaWQ9InN2Z18zIiBjeT0iNDA4IiBjeD0iOTMiIHN0cm9rZS1vcGFjaXR5PSJudWxsIiBzdHJva2Utd2lkdGg9IjAiIGZpbGw9IiNEREREREQiLz4KICA8ZWxsaXBzZSBvcGFjaXR5PSIwLjciIHN0cm9rZT0iIzAwMCIgcnk9IjUwIiByeD0iNTAiIGlkPSJzdmdfNCIgY3k9IjQwOCIgY3g9IjI4NCIgc3Ryb2tlLW9wYWNpdHk9Im51bGwiIHN0cm9rZS13aWR0aD0iMCIgZmlsbD0iI0RERERERCIvPgogIDxlbGxpcHNlIG9wYWNpdHk9IjAuNyIgc3Ryb2tlPSIjMDAwIiByeT0iNTAiIHJ4PSI1MCIgaWQ9InN2Z184IiBjeT0iNDA4IiBjeD0iNDY5IiBmaWxsLW9wYWNpdHk9Im51bGwiIHN0cm9rZS1vcGFjaXR5PSJudWxsIiBzdHJva2Utd2lkdGg9IjAiIGZpbGw9IiNEREREREQiLz4KICA8ZWxsaXBzZSBvcGFjaXR5PSIwLjciIHN0cm9rZT0iIzAwMCIgcnk9IjUwIiByeD0iNTAiIGlkPSJzdmdfOSIgY3k9IjQwOCIgY3g9IjY1MSIgZmlsbC1vcGFjaXR5PSJudWxsIiBzdHJva2Utb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLXdpZHRoPSIwIiBmaWxsPSIjREREREREIi8+CiAgPGVsbGlwc2Ugb3BhY2l0eT0iMC43IiBzdHJva2U9IiMwMDAiIHJ5PSI1MCIgcng9IjUwIiBpZD0ic3ZnXzEwIiBjeT0iNTc2IiBjeD0iOTMiIHN0cm9rZS1vcGFjaXR5PSJudWxsIiBzdHJva2Utd2lkdGg9IjAiIGZpbGw9IiNEREREREQiLz4KICA8ZWxsaXBzZSBvcGFjaXR5PSIwLjciIHN0cm9rZT0iIzAwMCIgcnk9IjUwIiByeD0iNTAiIGlkPSJzdmdfMTEiIGN5PSI1NzYiIGN4PSIyODQiIHN0cm9rZS1vcGFjaXR5PSJudWxsIiBzdHJva2Utd2lkdGg9IjAiIGZpbGw9IiNEREREREQiLz4KICA8ZWxsaXBzZSBvcGFjaXR5PSIwLjciIHN0cm9rZT0iIzAwMCIgcnk9IjUwIiByeD0iNTAiIGlkPSJzdmdfMTIiIGN5PSI1NzYiIGN4PSI0NjkiIGZpbGwtb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLW9wYWNpdHk9Im51bGwiIHN0cm9rZS13aWR0aD0iMCIgZmlsbD0iI0RERERERCIvPgogIDxlbGxpcHNlIG9wYWNpdHk9IjAuNyIgc3Ryb2tlPSIjMDAwIiByeT0iNTAiIHJ4PSI1MCIgaWQ9InN2Z18xMyIgY3k9IjU3NiIgY3g9IjY1MSIgZmlsbC1vcGFjaXR5PSJudWxsIiBzdHJva2Utb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLXdpZHRoPSIwIiBmaWxsPSIjREREREREIi8+CiAgPHJlY3Qgc3Ryb2tlPSIjMDAwIiBvcGFjaXR5PSIwLjciIGlkPSJzdmdfMTQiIGhlaWdodD0iODAiIHdpZHRoPSI2NTYiIHk9IjY4OSIgeD0iNDYiIGZpbGwtb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLW9wYWNpdHk9Im51bGwiIHN0cm9rZS13aWR0aD0iMCIgZmlsbD0iI0RERERERCIvPgogIDxyZWN0IGlkPSJzdmdfMTYiIGhlaWdodD0iMjguMDAwMDE1IiB3aWR0aD0iMCIgeT0iODM5IiB4PSIzNzUiIGZpbGwtb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLW9wYWNpdHk9Im51bGwiIHN0cm9rZS13aWR0aD0iMCIgc3Ryb2tlPSIjMDAwIiBmaWxsPSIjREREREREIi8+CiAgPHJlY3Qgc3Ryb2tlPSIjMDAwIiBvcGFjaXR5PSIwLjciIGlkPSJzdmdfMTciIGhlaWdodD0iMzAiIHdpZHRoPSI2NTYiIHk9IjgwNSIgeD0iNDYiIGZpbGwtb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLW9wYWNpdHk9Im51bGwiIHN0cm9rZS13aWR0aD0iMCIgZmlsbD0iI0RERERERCIvPgogIDxyZWN0IHN0cm9rZT0iIzAwMCIgb3BhY2l0eT0iMC43IiBpZD0ic3ZnXzE4IiBoZWlnaHQ9IjMwIiB3aWR0aD0iNjU2IiB5PSI4NjciIHg9IjQ2IiBmaWxsLW9wYWNpdHk9Im51bGwiIHN0cm9rZS1vcGFjaXR5PSJudWxsIiBzdHJva2Utd2lkdGg9IjAiIGZpbGw9IiNEREREREQiLz4KICA8cmVjdCBzdHJva2U9IiMwMDAiIG9wYWNpdHk9IjAuNyIgaWQ9InN2Z18xOSIgaGVpZ2h0PSIzMCIgd2lkdGg9IjY1NiIgeT0iOTI3IiB4PSI0NiIgZmlsbC1vcGFjaXR5PSJudWxsIiBzdHJva2Utb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLXdpZHRoPSIwIiBmaWxsPSIjREREREREIi8+CiAgPHJlY3Qgc3Ryb2tlPSIjMDAwIiBvcGFjaXR5PSIwLjciIGlkPSJzdmdfMjAiIGhlaWdodD0iMzAiIHdpZHRoPSI2NTYiIHk9Ijk4NyIgeD0iNDYiIGZpbGwtb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLW9wYWNpdHk9Im51bGwiIHN0cm9rZS13aWR0aD0iMCIgZmlsbD0iI0RERERERCIvPgogIDxyZWN0IHN0cm9rZT0iIzAwMCIgb3BhY2l0eT0iMC43IiBpZD0ic3ZnXzIxIiBoZWlnaHQ9IjMwIiB3aWR0aD0iNjU2IiB5PSIxMDQ3IiB4PSI0NiIgZmlsbC1vcGFjaXR5PSJudWxsIiBzdHJva2Utb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLXdpZHRoPSIwIiBmaWxsPSIjREREREREIi8+CiAgPHJlY3Qgc3Ryb2tlPSIjMDAwIiBvcGFjaXR5PSIwLjciIGlkPSJzdmdfMjIiIGhlaWdodD0iMzAiIHdpZHRoPSI2NTYiIHk9IjExMDciIHg9IjQ2IiBmaWxsLW9wYWNpdHk9Im51bGwiIHN0cm9rZS1vcGFjaXR5PSJudWxsIiBzdHJva2Utd2lkdGg9IjAiIGZpbGw9IiNEREREREQiLz4KICA8cmVjdCBzdHJva2U9IiMwMDAiIG9wYWNpdHk9IjAuNyIgaWQ9InN2Z18yMyIgaGVpZ2h0PSIzMCIgd2lkdGg9IjY1NiIgeT0iMTE2NyIgeD0iNDYiIGZpbGwtb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLW9wYWNpdHk9Im51bGwiIHN0cm9rZS13aWR0aD0iMCIgZmlsbD0iI0RERERERCIvPgogIDxyZWN0IHN0cm9rZT0iIzAwMCIgb3BhY2l0eT0iMC43IiBpZD0ic3ZnXzI0IiBoZWlnaHQ9IjMwIiB3aWR0aD0iNjU2IiB5PSIxMjI3IiB4PSI0NiIgZmlsbC1vcGFjaXR5PSJudWxsIiBzdHJva2Utb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLXdpZHRoPSIwIiBmaWxsPSIjREREREREIi8+CiA8L2c+Cjwvc3ZnPgo="/>
</div>
<!-- built files will be auto injected -->
</body>
</html>
package.json
View file @ 63a57615
{
"name": "hls-easy-ui",
"version": "0.0.2",
"version": "0.0.5",
"description": "A Vue components project",
"author": "JingChao <jingchao.wu@hand-china.com>",
"private": false,
......@@ -20,13 +20,11 @@
"dependencies": {
"autosize": "^3.0.20",
"better-scroll": "^1.10.3",
"crypto-js": "^3.1.9-1",
"fastclick": "https://hel.hand-china.com/easyUI/fastclick.git",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^2.1.1",
"vuex-i18n": "^1.3.1",
"vux": "^2.9.2"
"vux": "^2.9.2",
"vue-lazyload": "1.2.3"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
......@@ -86,7 +84,7 @@
"vue-slim-better-scroll": "^1.4.1",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"vux-loader": "^1.0.56",
"vux-loader": "latest",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-middleware": "^1.10.0",
......
packages/common/scripts/filter.js
View file @ 63a57615
......@@ -21,6 +21,10 @@ export default (Vue) => {
return intPartFormat + floatPart
}
})
Vue.filter('uncurrency', function (val) {
if (!val) return null
return Number((val).replace(/,/gi, ''))
})
Vue.filter('datetime', timestamp => {
function format (number) {
return number.toString().padStart(2, '0')
......
packages/common/scripts/hlsPopup.js
View file @ 63a57615
......@@ -4,9 +4,9 @@ import ActionSheet from '../../components/ActionSheet/index'
import ShowPicture from '../../components/ShowPicture/index'
import Select from '../../components/select/index'
import Notify from '../../components/Dialog/plugins/index'
import HlsModal from '../../components/Modal/index'
// import HlsModal from '../../components/Modal/index'
import numberKeyboard from '../../components/NumberKeyboard/index'
import NumberKeyboard from '../../components/NumberKeyboard/index'
Vue.use(ToastPlugin)
Vue.use(AlertPlugin)
......@@ -16,10 +16,10 @@ Vue.use(DatetimePlugin)
Vue.use(ActionSheet)
Vue.use(ShowPicture)
Vue.use(Select)
Vue.use(numberKeyboard)
Vue.use(NumberKeyboard)
Vue.use(Notify)
Vue.use(HlsModal)
Vue.prototype.HlsModal = window.HlsModal = HlsModal
// Vue.prototype.HlsModal = window.HlsModal = HlsModal
export default {
......@@ -68,19 +68,13 @@ export default {
showLongTop: function (content) {
let vm = this
let text = content || '操作失败'
if (!process.env.isMobilePlatform) {
Vue.$vux.toast.show({
text: text,
type: 'text',
time: vm.SHOW_TIMES,
isShowMask: vm.IS_SHOW_MASK,
position: 'top',
})
} else {
window.plugins.toast.showLongTop(content, function (success) {
}, function (error) { // eslint-disable-line
})
}
Vue.$vux.toast.show({
text: text,
type: 'text',
time: vm.SHOW_TIMES,
isShowMask: vm.IS_SHOW_MASK,
position: 'top',
})
},
/**
......@@ -90,19 +84,13 @@ export default {
showLongCenter: function (content) {
let vm = this
let text = content || '操作失败'
if (!process.env.isMobilePlatform) {
Vue.$vux.toast.show({
text: text,
type: 'text',
time: vm.SHOW_TIMES,
isShowMask: vm.IS_SHOW_MASK,
position: 'middle',
})
} else {
window.plugins.toast.showLongCenter(content, function (success) {
}, function (error) { // eslint-disable-line
})
}
Vue.$vux.toast.show({
text: text,
type: 'text',
time: vm.SHOW_TIMES,
isShowMask: vm.IS_SHOW_MASK,
position: 'middle',
})
},
/**
* 长时间中部提示toast
......@@ -111,19 +99,13 @@ export default {
showLongBottom: function (content) {
let vm = this
let text = content || '操作失败'
if (!process.env.isMobilePlatform) {
Vue.$vux.toast.show({
text: text,
time: vm.SHOW_TIMES,
type: 'text',
isShowMask: vm.IS_SHOW_MASK,
position: 'bottom',
})
} else {
window.plugins.toast.showLongBottom(content, function (success) {
}, function (error) { // eslint-disable-line
})
}
Vue.$vux.toast.show({
text: text,
time: vm.SHOW_TIMES,
type: 'text',
isShowMask: vm.IS_SHOW_MASK,
position: 'bottom',
})
},
/**
* 成功提示框
......@@ -160,35 +142,19 @@ export default {
* @param confirmObject.onConfirm 确定函数
*/
showConfirm: function (confirmObject) {
if (!process.env.isMobilePlatform) {
let def = {
title: confirmObject.title || '提示',
content: confirmObject.content || '',
confirmText: '确定',
cancelText: '取消',
onConfirm: () => {
confirmObject.onConfirm(1)
},
onCancel: () => {
confirmObject.onConfirm(0)
},
}
Vue.$vux.confirm.show(def)
} else {
let message = confirmObject.content || ''
let onConfirm = function (index) {
confirmObject.onConfirm(index)
}
let title = confirmObject.title || '提示'
navigator.notification.confirm(
message, // message
function (index) {
onConfirm(index - 1)
},
title, // title
['取消', '确定'] // buttonLabels
)
let def = {
title: confirmObject.title || '提示',
content: confirmObject.content || '',
confirmText: '确定',
cancelText: '取消',
onConfirm: () => {
confirmObject.onConfirm(1)
},
onCancel: () => {
confirmObject.onConfirm(0)
},
}
Vue.$vux.confirm.show(def)
},
/*
* 弹出确认的窗口
......@@ -198,30 +164,16 @@ export default {
*
*/
showPopup: function (confirmObject) {
if (!process.env.isMobilePlatform) {
let def = {
title: confirmObject.title || '提示',
content: confirmObject.content || '',
confirmText: '确定',
showCancelButton: false,
onConfirm: () => {
confirmObject.onConfirm()
},
}
Vue.$vux.confirm.show(def)
} else {
var alertDismissed = function (index) {
let def = {
title: confirmObject.title || '提示',
content: confirmObject.content || '',
confirmText: '确定',
showCancelButton: false,
onConfirm: () => {
confirmObject.onConfirm()
}
let title = confirmObject.title || '提示'
var message = confirmObject.content || ''
navigator.notification.alert(
message, // message
alertDismissed, // callback
title || '提示', // title
'确定' // buttonName
)
},
}
Vue.$vux.confirm.show(def)
},
/**
* @param actionObject.titleText 弹出框的标题可空
......@@ -306,6 +258,8 @@ export default {
ShowPicture.show({
imgUrl: imgObject.imgUrl,
width: imgObject.width,
imgList: imgObject.imgList,
startPosition: imgObject.startPosition,
})
}
},
......@@ -364,7 +318,7 @@ export default {
*/
showNumberKeyborad: function (keyboardObject) {
if (typeof keyboardObject === 'object') {
numberKeyboard.show({
NumberKeyboard.show({
title: keyboardObject.title,
closeButtonText: keyboardObject.closeButtonText,
extraKey: keyboardObject.extraKey || '.',
......
packages/common/scripts/hlsUtil.js
View file @ 63a57615
......@@ -92,7 +92,7 @@ export default {
// 校验日期
verifyBirthday: function (year, month, day, birthday) {
// 年月日是否合理
return (birthday.getFullYear().toString() === year && ((birthday.getMonth() + 1) < 10 ? '0' + (birthday.getMonth() + 1) : (birthday.getMonth() + 1)) === month &&
return (birthday.getFullYear().toString() === year && ((birthday.getMonth() + 1) < 10 ? '0' + (birthday.getMonth() + 1) : (birthday.getMonth() + 1).toString()) === month &&
birthday.getDate().toString() === day)
},
......
packages/common/styles/ionic-public-style.less
View file @ 63a57615
......@@ -54,44 +54,6 @@
padding-top: 0.8rem;
}
}
.header-bar {
background-color: #FFFFFF;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); /*no*/
.buttons {
.button {
color: @headerColor;
font-size: 0.32rem;
padding-left: 0.2rem;
padding-right: 0.25rem;
}
}
.title {
color: #4A4A4A;
font-size: 0.34rem;
//font-weight: 600;
left: 0 !important;
right: 0 !important;
}
.iconLeft {
text-align: left;
i {
font-size: 0.25rem;
padding-left: 0.1rem;
}
}
}
.bar-custom {
background-color: @headerColor;
border-bottom: none;
.buttons {
.button {
color: #ffffff;
}
}
.title {
color: #ffffff;
}
}
// ion-list he ion-item公用样式 -
.content {
//padding-top: 2px;
......
packages/common/styles/platform-ios.less
View file @ 63a57615
......@@ -11,7 +11,8 @@
}
.has-header {
padding-bottom: 1.28rem;
top: 1.28rem;
//padding-bottom: 1.28rem;
}
.header-top {
margin-top: 1.26rem;
......
packages/common/styles/platform-iosx.less
View file @ 63a57615
......@@ -8,9 +8,9 @@
bottom: 1.68rem;
}
.has-footer {
// padding-bottom: 2.84rem;
.scrollContent {
padding-bottom: 1.44rem;
padding-bottom: 1.6rem;
.scrollContent{
padding-bottom: 2.84rem;
}
}
......@@ -34,7 +34,7 @@
bottom: 1.68rem;
}
.has-footer {
// padding-bottom: 2.84rem;
padding-bottom: 1.6rem;
.scrollContent{
padding-bottom: 1.44rem;
}
......
packages/common/styles/publicStyle.less
View file @ 63a57615
......@@ -44,7 +44,7 @@
max-width: 14em;
min-height: 3em !important;
top: 38% !important;
border-radius: 0.14rem !important;
border-radius: 0.3rem !important;
}
.weui-toast.vux-toast-top {
......@@ -73,7 +73,7 @@
.weui-toast_text .weui-toast__content {
border-radius: 0.2rem !important;
padding: 0.12rem 0.14rem;
padding: 0.12rem 0.14rem !important;
}
.weui-toast.vux-toast-bottom {
......
packages/common/styles/variables.less
View file @ 63a57615
......@@ -19,7 +19,9 @@
@background-color-gray: #fafafa;
@activated-color: #5D98F6;
@divider-color:#fafafa;
@check-box-bg:#48D2A0;
@switch-box-bg:#48D2A0;
@check-box-bg:@theme-color;
@radio-box-bg:#ff00ff;
/**
......
packages/common/ydui.flexible.js
View file @ 63a57615
/* eslint-disable */
/**
* YDUI 可伸缩布局方案
* rem计算方式：设计图尺寸px / 100 = 实际rem 例: 100px = 1rem
* rem计算方式：设计图尺寸px / 50 = 实际rem 例: 100px = 2rem
*/
!(function(window) {
/* 设计图文档宽度 */
......
packages/components/ActionSheet/actionsheet.vue
View file @ 63a57615
......@@ -13,7 +13,7 @@
v-text="b.text"/>
</div>
<div class="action-sheet-group action-sheet-cancel">
<div class="ng-binding action-sheet-option" style="border:none" @click="hide(-1)">取消</div>
<div class="action-sheet-option" style="border:none" @click="hide(-1)">取消</div>
</div>
</div>
</div>
......@@ -65,7 +65,6 @@
}
}
}
}
.action-sheet-backdrop {
......
packages/components/BottomTab/index.vue
View file @ 63a57615
......@@ -32,7 +32,7 @@ export default {
width: 100%;
background-color: #fff;
position: fixed;
z-index: 5;
z-index: 10;
bottom: 0;
display: flex;
align-items: center;
......
packages/components/CheckBox/README.md
View file @ 63a57615
checkBox 配合 ListItem组件调用
h-check checkBox
```html
<list-item>
<item :show-arrow="true">
<img slot="left-icon" src="../assets/myInfo/version@2x.png" class="left-icon">
<div slot="name">检查更新</div>
<check-box slot="content" v-model="savePhoto" @checkClick="savePhotoFun"></check-box>
<h-check slot="left-icon" v-model="radioValue" @checkClick="checkClick"/>
<section slot="content">CheckBox</section>
</item>
</list-item>
<h-check slot="left-icon" v-model="checkValue" :disable="true" @checkClick="checkClick"/>
export default {
data() {
return {
savePhoto: new Boolean(window.localStorage.savePhoto) || false,
radioValue: false,
}
},
methods: {
savePhotoFun(value) {
this.savePhoto = value;
window.localStorage.setItem('savePhoto', value);
checkClick(value) {
this.checkValue = value;
}
}
}
```
style
@check-box-bg checkbox选中是的背景颜色
v-model 绑定value值 true/false
disable 是否只读 true/false
@checkClick 点击checkBox返回当前value值
packages/components/CheckBox/index.vue 100755 → 100644
View file @ 63a57615
/**
* @Author think
* @Date 2019-07-10 09:39
*/
<template>
<label
:class="cusClass" class="toggle toggle-positive toggle-check"
@touchstart="checked"
@mousedown="checked">
<input :checked="value" type="checkbox">
<div class="track">
<div class="handle"/>
</div>
<label class="h-checkbox" @click="checked">
<label class="checkbox">
<input :checked="value" :disabled="disable" type="checkbox">
</label>
</label>
</template>
......@@ -18,68 +19,79 @@ export default {
type: Boolean,
default: false,
},
cusClass: {
type: String,
default: '',
disable: {
type: Boolean,
default: false,
},
/* checkedColor: {
type: String,
default: '#5D98F6',
}, */
},
data () {
return {
// clickValue: false
}
},
computed: {
/* value() {
return value ? value : false
} */
return {}
},
watch: {
value (val) {
this.$emit('input', val)
this.value = val
},
},
methods: {
checked () {
this.$emit('checkClick', !this.value)
if (!this.disable) {
this.$emit('input', !this.value)
this.$emit('checkClick', !this.value)
}
},
},
}
</script>
<style lang="less" scoped>
.toggle-check {
display: -webkit-flex;
<style lang="less">
@import "../../common/styles/variables";
.h-checkbox {
//width: 42px;
//height: 42px;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
align-items: center;
.track {
width: 40px;
height: 25px;
margin-right: 2.5px;
border-radius: 15px;
.handle {
width: 22.5px;
height: 22.5px;
top: 3.5px;
left: 2.5px;
.checkbox {
padding: 5px 5px;
input {
width: 22px;
height: 22px;
border-radius: 11px;
&:after {
top: 32%;
left: 20%;
opacity: 1;
border-width: 2px; /*no*/
}
&:checked {
&:before {
background: @check-box-bg;
border-color: @check-box-bg;
}
}
&:disabled {
&:checked {
opacity: .7;
}
}
}
}
}
.toggle.toggle-positive input:checked + .track {
border-color: @check-box-bg;
background-color: @check-box-bg;
.handle {
width: 22.5px;
height: 22.5px;
top: 3.5px;
left: 9px;
.hls-item {
.contents {
.h-checkbox {
.checkbox {
padding: 0;
}
}
}
}
</style>
packages/components/CurrencyInput/README.md 0 → 100755
View file @ 63a57615
curreny-input 金额输入框
```html
<list-item>
<item>
<div slot="name">融资额</div>
<curreny-input slot="content" v-model="money"/>
<div slot="right-icon">¥</div>
</item>
</list-item>
export default {
data() {
return {
money: null,
}
}
}
```
v-model 绑定value值 number值
disable 是否只读 true/false
packages/components/CurrencyInput/index.vue 0 → 100644
View file @ 63a57615
/**
* @Author think
* @Date 2019-09-09 14:29
*/
<template>
<input
:value="formatValue" :readonly="disable" type="text"
@input="onInput($event.target.value)" @focus="onFocus" @blur="onBlur">
</template>
<script>
export default {
name: 'CurrencyInput',
props: {
value: {
type: Number,
default: 0,
},
disable: {
type: Boolean,
default: false,
},
},
data () {
return {
focused: false,
}
},
filter: {
uncurrency (val) {
if (!val) return null
return (Number((val).replace(/,/gi, ''))) === 0 ? null : Number((val).replace(/,/gi, ''))
},
},
computed: {
formatValue () {
let currency = this.$options.filters['currency']
if (!this.focused) {
return currency(this.value)
} else {
return this.value
}
},
},
methods: {
onInput: function (value) {
let uncurrency = this.$options.filter['uncurrency']
this.currencyValue = uncurrency(value)
this.$emit('input', this.currencyValue)
},
onFocus (event) {
this.focused = true
setTimeout(function () {
event.target.type = 'number'
event.target.focus()
}, 0)
},
onBlur (event) {
event.target.type = 'text'
this.focused = false
},
},
}
</script>
<style scoped lang="less">
</style>
packages/components/Dialog/Notify.vue
View file @ 63a57615
......@@ -111,7 +111,7 @@ export default {
position: absolute;
left: 0;
text-align: center;
z-index: 1;
z-index: 5;
&-top {
top: 0;
......
packages/components/HContent/index.vue
View file @ 63a57615
......@@ -4,18 +4,147 @@
*/
<template>
<section :class="cusClass" class="content">
<div
class="content" @touchstart.capture="touchStart" @touchend.capture="touchEnd">
<slot/>
</section>
</div>
</template>
<script>
import { detectOS } from '../../common/utils/index'
export default {
name: 'HContent',
props: {
cusClass: {
type: String,
default: '',
calContent: {
type: Boolean,
default: true,
},
},
data () {
return {
fontSize: Number(window.document.documentElement.style.fontSize.replace('px', '')),
winHeight: window.innerHeight,
winWidth: window.innerWidth,
height: 0,
startY: 0,
endY: 0,
}
},
mounted () {
let vm = this
if (this.calContent) {
this.contentHeight()
}
window.addEventListener('native.keyboardshow', function (e) {
setTimeout(function () {
if (detectOS() === 'android') {
vm.$el.style.transition = 'all .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
vm.$el.style.transform = 'translate(0px, -45px) scale(1) translateZ(0px)'
} else {
let keyBoardHeight = vm.getKeyBoardHeight()
let scollHeight = (innerHeight - vm.endY) < keyBoardHeight ? (keyBoardHeight - (innerHeight - vm.endY)) : 0
if (scollHeight) {
vm.$el.style.paddingBottom = (scollHeight + 20) + 'px'
vm.$el.style.transition = 'all .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
vm.$el.style.transform = 'translate(0px, -' + scollHeight + 'px) scale(1) translateZ(0px)'
}
}
}, 300)
})
window.addEventListener('native.keyboardhide', function (e) {
setTimeout(function () {
vm.$el.style.transition = 'all .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
vm.$el.style.transform = 'translate(0px, 0px) scale(1) translateZ(0px)'
vm.$el.style.paddingBottom = '0px'
}, 300)
})
},
methods: {
touchStart (event) {
if (detectOS() === 'ios') {
if (event.target.readOnly) return
if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA') {
this.startY = event.changedTouches[0].clientY
}
}
},
touchEnd (event) {
if (detectOS() === 'ios') {
if (event.target.readOnly) return
if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA') {
this.endY = event.changedTouches[0].clientY
}
}
},
getHeaderHeight () {
let vm = this
let $el = vm.$el.previousElementSibling
let headerHeight = 0
do {
if ($el) {
let elHeight = window.getComputedStyle($el).height
if (elHeight) {
headerHeight += Number(elHeight.replace('px', ''))
}
if ($el._prevClass && $el._prevClass.indexOf('h-header') === 0) {
if (detectOS() === 'ios' && vm.winWidth === 375 && vm.winHeight === 812) {
headerHeight += 0.8 * vm.fontSize
} else if (detectOS() === 'ios' && vm.winWidth === 414 && vm.winHeight === 896) {
headerHeight += 0.8 * vm.fontSize
} else if (detectOS() === 'ios') {
headerHeight += 0.4 * vm.fontSize
}
}
$el = $el.previousElementSibling
}
} while ($el)
return headerHeight
},
getNextElementHeight () {
let vm = this
let nextElement = this.$el.nextElementSibling
let nextHeight = 0
do {
if (nextElement) {
let elHeight = window.getComputedStyle(nextElement).height
if (elHeight) {
nextHeight += Number(elHeight.replace('px', ''))
}
if (nextElement._prevClass && nextElement._prevClass.indexOf('h-bottom-tab') === 0) {
if (detectOS() === 'ios' && vm.winWidth === 375 && vm.winHeight === 812) {
nextHeight += vm.fontSize * 0.68
} else if (detectOS() === 'ios' && vm.winWidth === 414 && vm.winHeight === 896) {
nextHeight += vm.fontSize * 0.68
}
}
nextElement = nextElement.nextElementSibling
}
} while (nextElement)
return nextHeight
},
contentHeight () {
let vm = this
const headerHeight = vm.getHeaderHeight()
const nextHeight = vm.getNextElementHeight()
let content = vm.$el
vm.height = (window.innerHeight - nextHeight - headerHeight)
content.style.height = (window.innerHeight - nextHeight - headerHeight) + 'px'
},
getKeyBoardHeight () {
let innerWidth = window.innerWidth
if (detectOS() === 'ios') {
if (innerWidth >= 375 && innerHeight >= 812) {
return 460
}
return 400
} else {
return 275
}
},
},
}
......@@ -26,18 +155,13 @@ export default {
flex: 1;
overflow: hidden;
background-color: #fafafa;
position: relative;
overflow-y: scroll;
height: 100%;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
.platform-ios {
.has-header{
top:64px
}
}
// iPhoneX适配
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
.platform-ios {
......
packages/components/HFile/README.md 0 → 100644
View file @ 63a57615
文件上传组建 h-file 用于选择本地文件预览上传
```html
<template>
<h-view>
<h-content>
<h-file
:file-list="fileList" v-model="fileList" :upload="upload"
:upload-config="uploadConfig" :disabled="disable" :accept="accept" :beforeRead="beforeRead"
:afterRead="afterRead" :maxCount="maxCount" :max-size="maxSize" :previewImage="previewImage"
:deleteImage="deleteImage"
:result-type="resultType"
@upload="uploaded"
@delete="deletePic"
@oversize="oversize"/>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'FileTest',
data () {
return {
fileList: [], // 文件数组 必填
disable: false, // 是否禁用文件上传 默认false 可选
accept: 'image/png,image/jpeg', // 接受的文件类型 可选
upload: false, // 选取完成是否自动上传 默认 false 可选
maxSize: 2000000, // 文件大小限制，单位为byte 可选 超过大小的文件会自动取消
maxCount: 5, // 文件上传数量限制 可选超过数量自动隐藏选择按钮
deleteImage: true, // 是否删除文件 默认true 可选
previewImage: true, // 是否在选取完成后展示预览图 默认true 可选
resultType: 'dataUrl', // 文件读取结果类型 默认读取完成后取base64 可选值为text
uploadConfig: { // 文件上传配置
uploadUrl: $config.rootPath + '/app/fileUploadSvc?sysName=HLS_APP&apiName=attachment_upload', // 上传的URL
params: { // 上传的额外参数
user_id: 1,
source_type: 'HLS_DOC_FILE_TEMPLET',
pkvalue: 42,
},
uploadSuccess: this.fileSuccess, // 上传成功后的回调函数 用于给文件添加服务端唯一标示或其他
},
}
},
methods: {
/**
* email事件 可选
* 删除文件后触发 返回当前文件以及 对应的index
* @param file
* @param index
*/
deletePic (file, index) {
debugger
},
/**
* 可选
* 文件选择完成后读取前触发 返回当前选择的文件数组
* 返回 ture 或者promise对象 标示继续读取，否则终止 操作
* @param files 选择的文件数组
* @returns {boolean}
*/
beforeRead (files) {
files.forEach((file, index) => {
console.log(file.size)
})
return true
},
/**
* 可选
* 文件读取成功后触发添加了文件的content内容
* @param files 选择的文件数组
* @returns {boolean}
*/
afterRead (files) {
files.forEach((item, index) => {
console.log(item.file.name)
})
return true
},
/**
* email事件 可选
* 全部文件上传成功后触发
* @param fileList 全部文件数组
*/
uploaded (fileList) {
debugger
},
/**
* email事件 可选
* 文件大小超过配置的大小
* @param files
*/
oversize (files) {
debugger
},
/**
* 每个文件上传成功后的回调 可选配置
* @param fileList 文件数组
* @param result 上传返回结果
*/
fileSuccess (fileList, result) {
this.fileList = fileList
this.fileList.forEach((itemFile, index) => {
if (result.response && itemFile.file && !itemFile.attachment_id && result.response.fileName === itemFile.file.name) {
itemFile.attachment_id = result.response.attachment_id
}
})
},
},
}
</script>
<style scoped lang="less">
</style>
```
默认插槽 slot 用于自定义选择文件样式
v-model 绑定文件数组
fileList 文件数组 [{file:File,content:''base64 or url'}]
disable: false, // 是否禁用文件上传 默认false 可选
accept: 'image/png,image/jpeg', // 接受的文件类型 可选
upload: false, // 选取完成是否自动上传 默认 false 可选
maxSize: 2000000, // 文件大小限制，单位为byte 可选 超过大小的文件会自动取消
maxCunt: 5, // 文件上传数量限制 可选超过数量自动隐藏选择按钮
deleteImage: true, // 是否删除文件 默认true 可选
previewImage: true, // 是否在选取完成后展示预览图 默认true 可选
resultType: 'dataUrl', // 文件读取结果类型 默认base64 可选值为text
uploadConfig: { // 文件上传配置
uploadUrl: $config.rootPath + '/app/fileUploadSvc?sysName=HLS_APP&apiName=attachment_upload', // 上传的URL
params: { // 上传的额外参数
user_id: 1,
source_type: 'HLS_DOC_FILE_TEMPLET',
pkvalue: 42,
},
uploadSuccess: this.fileSuccess, // 上传成功后的回调函数 用于给文件添加服务端唯一标示或其他
},
packages/components/HFile/index.vue 0 → 100644
View file @ 63a57615
/**
* @Author think
* @Date 2019-07-11 10:07
*/
<template>
<section class="h-file">
<div class="review-wrap">
<div v-for="(item,index) in fileList" v-if="previewImage" class="review-img">
<img v-lazy="item.content" :key="index" @click="showBigPic(index)">
<i v-if="deleteImage" class="icon ion-trash-a" @click="deleteFile(item,index)"/>
</div>
<section v-show="fileList.length < maxCount" class="file-upload">
<slot/>
<img v-if="!slot" class="default-img" src="./plus.png">
<input
ref="input" :accept="accept" :disabled="disabled" type="file"
multiple
@change="change">
</section>
</div>
</section>
</template>
<script>
import ShowPicturePlugin from '../ShowPicture/index'
import { toArray, readFile, isOversize, isImageDataUrl } from './utils'
import axios from 'axios'
export default {
name: 'HFile',
props: {
disabled: {
type: Boolean,
default: false,
},
afterRead: {
type: Function,
default: () => { return true },
},
beforeRead: {
type: Function,
default: () => { return true },
},
uploadConfig: {
type: Object,
default: () => {},
},
upload: {
type: Boolean,
default: false,
},
fileList: {
type: Array,
default: () => [],
},
accept: {
type: String,
default: 'image/*',
},
maxSize: {
type: Number,
default: Number.MAX_VALUE,
},
maxCount: {
type: Number,
default: Number.MAX_VALUE,
},
previewImage: {
type: Boolean,
default: true,
},
resultType: {
type: String,
default: 'dataUrl',
},
deleteImage: {
type: Boolean,
default: true,
},
},
data () {
return {
slot: false,
fileReadList: [],
uploadFiles: [],
}
},
mounted () {
let vm = this
if (this.$slots.default) {
vm.slot = true
} else {
vm.slot = false
}
},
methods: {
resetInput () {
/* istanbul ignore else */
if (this.$refs.input) {
this.$refs.input.value = ''
}
},
change ($event) {
let vm = this
let { files } = event.target
if (vm.disabled || !files.length) {
return
}
files = files.length === 1 ? files[0] : [].slice.call(files)
if (vm.beforeRead) {
const response = vm.beforeRead(toArray(files))
if (!response) {
vm.resetInput()
return
}
if (response.then) {
response
.then(() => {
vm.fileRead(files)
})
.catch(vm.resetInput)
}
}
vm.fileRead(files)
},
fileRead (files) {
const oversize = isOversize(files, this.maxSize)
if (oversize) {
files = files.filter(file => file.size <= this.maxSize)
}
if (Array.isArray(files)) {
const maxCount = this.maxCount - this.fileList.length
if (files.length > maxCount) {
files = files.slice(0, maxCount)
}
Promise.all(files.map(file => readFile(file, this.resultType))).then(contents => {
const fileList = files.map((file, index) => ({
file,
content: contents[index],
}))
this.onAfterRead(fileList, oversize)
})
} else {
readFile(files, this.resultType).then(content => {
this.onAfterRead({ file: files, content: content }, oversize)
})
}
},
onAfterRead (files, oversize) {
if (oversize) {
this.$emit('oversize', toArray(files))
// return
}
this.resetInput()
this.$emit('input', [...this.fileList, ...toArray(files)])
if (this.afterRead) {
this.afterRead(toArray(files))
}
if (this.upload) {
this.fileReadList = [...this.fileList, ...toArray(files)]
this.uploadFiles = Object.assign(this.uploadFiles, toArray(files))
this.onUploadFile()
}
},
onUploadFile () {
let vm = this
if (this.upload) {
if (vm.uploadConfig) {
let itemFile = vm.uploadFiles.pop()
let url = vm.uploadConfig.uploadUrl
let uploadParams = vm.uploadConfig.params
let uploadSuccess = vm.uploadConfig.uploadSuccess
let param = new FormData()
for (let key in uploadParams) {
param.append(key, uploadParams[key])
}
param.append('fileName', itemFile.file.name)
param.append('file', itemFile.file)
axios.post(url, param, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Bearer ' + window.localStorage.access_token,
},
}).then(function (result) {
/* vm.fileReadList.forEach((itemFile, index) => {
if (result.response && itemFile.file && !itemFile.attachment_id && result.response.fileName === itemFile.file.name) {
itemFile.attachment_id = result.response.attachment_id
}
}) */
if (uploadSuccess) {
uploadSuccess(itemFile, result)
}
if (vm.uploadFiles.length > 0) {
vm.onUploadFile()
} else {
vm.$emit('upload', vm.fileReadList)
vm.$emit('input', vm.fileReadList)
vm.fileReadList = []
}
})
}
}
},
deleteFile (file, index) {
const fileList = this.fileList.slice(0)
fileList.splice(index, 1)
this.$emit('input', fileList)
this.$emit('delete', file, index)
},
showBigPic (index) {
let vm = this
if (vm.previewImage) {
const imageFiles = vm.fileList
.filter(item => isImageDataUrl(item.content))
ShowPicturePlugin.show({
imgList: imageFiles,
startPosition: index,
})
}
},
},
}
</script>
<style lang="less">
.h-file {
display: flex;
flex-wrap: wrap;
.review-wrap {
display: flex;
flex-wrap: wrap;
.review-img {
position: relative;
display: block;
img {
width: 65px;
height: 65px;
margin: 0 10px 10px 0;
object-fit: cover
}
.icon {
position: absolute;
right: 10px;
bottom: 12px;
font-size: 16px;
width: 16px;
height: 16px;
display: flex;
color: #fff;
background-color: rgba(0, 0, 0, 0.45);
justify-content: center;
}
}
.file-upload {
position: relative;
display: inline-block;
//width: 75px;
//height: 75px;
.default-img {
width: 65px;
height: 65px;
margin: 0 10px 10px 0;
object-fit: cover
}
input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
cursor: pointer;
opacity: 0;
}
}
}
}
</style>
packages/components/HFile/utils.js 0 → 100644
View file @ 63a57615
export function toArray (item) {
if (Array.isArray(item)) {
return item
}
return [item]
}
export function readFile (file, resultType) {
return new Promise(resolve => {
const reader = new FileReader()
reader.onload = event => {
resolve(event.target.result)
}
if (resultType === 'dataUrl') {
reader.readAsDataURL(file)
} else if (resultType === 'text') {
reader.readAsText(file)
}
})
}
export function isOversize (files, maxSize) {
return toArray(files).some(file => file.size > maxSize)
}
export function isImageDataUrl (dataUrl) {
return dataUrl.indexOf('data:image') === 0
}
packages/components/HHeader/index.vue
View file @ 63a57615
......@@ -57,6 +57,9 @@ export default {
color: #4A4A4A;
box-sizing: content-box;
overflow: hidden;
position: relative;
z-index: 20;
width: 100%;
.h-header-center {
flex: 1;
......@@ -116,11 +119,12 @@ export default {
vertical-align: middle;
box-sizing: border-box;
width: 80%;
color:@headerColor;
}
.ion-ios-arrow-back {
font-size: 32px;
color: @headerColor;
//color: @headerColor;
}
}
......@@ -128,13 +132,23 @@ export default {
.h-header-border {
border-bottom: 1px solid rgba(0, 0, 0, .1); /*no*/
}
.bar-custom {
.h-header-center, .h-header-btn {
background-color: @headerColor;
border-bottom: none;
.buttons {
.button {
color: #fff;
}
}
.title {
color: #fff;
}
.ion-ios-arrow-back {
.h-header-left, .h-header-right{
.h-header-btn{
color: #fff;
}
}
.h-header-center{
color: #fff;
}
}
......
packages/components/HLayout/README.md 0 → 100644
View file @ 63a57615
动态配置功能
目前支持配置 form、s-tab、button 以及底部固定位置的按钮
```html
/**
* @Author think
* @Date 2019-07-16 20:00
*/
<template>
<h-view class="form">
<h-header>
<div slot="left" class="h-header-btn" @click="$hlsExit()">
<i class="ion-ios-arrow-back"/>
</div>
<div slot="center">From</div>
<div slot="right" class="h-header-btn">右边</div>
</h-header>
<h-layout
v-if="layoutShow"
:layout-data="layoutData" :show-form-title="showFormTitle" :show-btn-divider="true"
:show-tab-divider="true" :formData="data" v-model="data" :read-only="readOnly"
:show-btn="showBtn"
@tabClick="tabClick"
@showSelect="showSelect" @showTime="showTime" @filedClick="filedClick"
@btnClick="btnClick"/>
</h-view>
</template>
```
```javascript
<script>
import layoutData from './layout.json'
export default {
name: 'Form',
data () {
return {
tabIndex: 1,
showFormTitle: true,
layoutData: [],
layoutShow: false,
readOnly: false,
showBtn: true,
data: {
contract: {
postion: '01',
postion_n: '技术顾问',
enable_flag: false,
},
},
postionList: [
{code: '01', code_name: '技术顾问'},
{code: '02', code_name: '技术经理'},
{code: '03', code_name: '项目经理'},
],
}
},
created () {
let vm = this
/* axios.get('http://leafservice.hand-china.com/r/api/get/layoutCode?layoutCode=CON_QURERY', {
header: {'Content-Type': 'application/json',
'Authorization': 'bearer SRHJVdrftyGUYguyhiHiuiojmgrrcgv' },
}).then(res => {
vm.layoutData = res.rows
vm.layoutShow = true
}) */
setTimeout(() => {
vm.layoutData = layoutData
vm.layoutShow = true
}, 100)
},
methods: {
/**
* tab的点击事件
* @param index
*/
tabClick (index) {
this.tabIndex = index
},
showPostion (configCode, filedCode) {
let vm = this
vm.hlsPopup.selectList({
list: vm.postionList,
code: filedCode,
object: vm.data[configCode],
returnItem (index) {
vm.data[configCode][filedCode] = vm.postionList[index].code
vm.data[configCode][filedCode + '_n'] = vm.postionList[index].code_name
},
})
},
/**
* 下拉框点击事件
* @param configCode
* @param filedCode
*/
showSelect (configCode, filedCode) {
let vm = this
switch (filedCode) {
case 'postion':
vm.showPostion(configCode, filedCode)
break
default:
}
},
showOrderDate (configCode, filedCode) {
let vm = this
vm.hlsPopup.showTime({
callback (time) {
vm.data[configCode][filedCode] = time
},
})
},
/**
* 事件选择事件
* @param configCode
* @param filedCode
*/
showTime (configCode, filedCode) {
let vm = this
switch (filedCode) {
case 'order_date':
vm.showOrderDate(configCode, filedCode)
break
default:
}
},
/**
* 其他字端的点击事件
* @param configCode
* @param filedCode
*/
filedClick (configCode, filedCode) {
debugger
},
/**
* 按钮点击事件
* @param btn
*/
btnClick (btn) {
console.log(JSON.stringify(this.data, '', 2))
if (btn.btnType === 'BottomTab') {
if (btn.btnCode === 'save') {
alert('底部固定按钮的保存')
}
if (btn.btnCode === 'submit') {
alert('底部固定按钮的提交')
}
} if (btn.btnType === 'Button') {
if (btn.btnCode === 'nextBtn') {
alert('按钮继续')
}
}
},
},
}
</script>
```
```less
<style lang="less">
.form {
}
</style>
```
1. 动态布局目前仅仅支持一个 s-tab组件，一个底部按钮bottom-tab 组件
2. 组件名为h-layout，需要在布局查询出来之后再去渲染此组件否则渲染失败
3. 布局的查询在created生命周期函数内查询，查询成功再去渲染组件
4. 因无法在data里面直接set数据，故需在data里面新建data数据对象用于组件解析成功以及数据双向绑定使用
5. 支持在自定义data对象设置默认值，默认值的优先级高于组件定义的默认值
6. 组件使用v-model与formData进行传递data数据实现双向绑定，两者缺一不可
7. 组件中会解析出全部的按钮，每个按钮对应 组件code、按钮code、以及按钮描述。以btns数组反馈给父组件，用于按钮点击事件
8. 所有的下拉框、时间以及按钮的触发逻辑全部交由父组件处理，子组件通知父组件，子组件内不做任何业务处理逻辑
props
* layoutData:组件布局默认数组
* showFormTitle:是否展示form表单上的title，title也可以点击实现form的缩放 默认 true
* showTabDivider:是否显示s-tab的分割线 默认true
* showTabBorder:是否显示s-tab的下边框 默认false
* showBtn:是否显示按钮组件(button与bottom-tab)
* showBtnDivider:是否底部按钮的分割线 默认true
* formData:组件数据，用于双向绑定
* readOnly:设置组件全部只读，禁用字端及按钮的输入点击
emit
* tabClick s-tab组件切换点击事件 返回当前点击的index
* showSelect 下拉框点开事件 返回布局组件code，字端的code，用于判断是哪个下拉框
* showTime 事件点开事件 返回组件code，字端的code，用于判断是哪个时间选择
* filedClick 其它字端点击事件，字端类型为其它的点击事件 返回组件code，字端的code，可用于超链接，提示等
* btnClick 按钮点击事件，返回当前btn对象，包含组件code、按钮code、以及按钮描述，可根据此判断点击的是哪个按钮
packages/components/HLayout/index.vue 0 → 100644
View file @ 63a57615
This diff is collapsed.
packages/components/HView/index.vue
View file @ 63a57615
......@@ -20,12 +20,26 @@ export default {
type: Boolean,
default: true,
},
title: {
type: String,
default: '',
},
},
data () {
return {
isIos: false,
}
},
mounted () {
if (this.title) {
document.title = this.title
}
},
activated () {
if (this.title) {
document.title = this.title
}
},
created () {
this.fullScreen && detectOS() === 'ios' && (this.isIos = true)
},
......@@ -37,12 +51,12 @@ export default {
width: 100%;
height: 100%;
overflow: hidden;
padding-bottom: 44px;
// padding-bottom: 44px;
// background-color: $bgColor;
}
.platform-ios{
.h-view{
padding-bottom: 64px;
// padding-bottom: 64px;
}
}
......@@ -50,7 +64,7 @@ export default {
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
.platform-ios {
.h-view {
padding-bottom: 120px;
// padding-bottom: 120px;
}
}
}
......@@ -59,7 +73,7 @@ export default {
@media only screen and (device-width: 414px) and (device-height: 896px) {
.platform-ios {
.h-view {
padding-bottom: 120px;
// padding-bottom: 120px;
}
}
}
......
packages/components/ItemOption/index.vue
View file @ 63a57615
......@@ -8,8 +8,6 @@
<slot/>
</div>
<slot name="buttons"/>
<!--<div class="function edit" @click="myEdit" v-if="showEdit">{{editText}}</div>
<div class="function delete" @click="myDelete" v-if="showDelete">{{deleteText}}</div>-->
</div>
</div>
</template>
......@@ -21,8 +19,6 @@ export default {
name: 'ItemOption',
components: {optionButton},
props: {
showDelete: Boolean,
showEdit: Boolean,
deleteText: {
type: String,
default: '删除',
......@@ -65,14 +61,6 @@ export default {
this.init()
},
methods: {
myDelete () {
this.$emit('deleteFun')
this.$refs.item.style.transform = 'translate3d(0px,0px,0px)'
},
myEdit () {
this.$emit('editFun')
this.$refs.item.style.transform = 'translate3d(0px,0px,0px)'
},
touchStart (ev) {
this.$refs.item.style.transform = 'translate3d(0px,0px,0px)'
this.reset()
......
packages/components/ListItem/Item.vue
View file @ 63a57615
<template>
<div
:class="[showActivated,cusClass]"
:class="[showActivated,focus]"
:style="{'min-height':minHeight}"
class="hls-item">
<div
......@@ -11,7 +11,9 @@
@touchcancel="end"
@mousedown="start"
@mouseup="end"
@mouseleave="end">
@mouseleave="end"
@focusin="focusin"
@focusout="focusout">
<div v-if="showName" :style="{'min-height':minHeight,'flex':proportion[0] }" class="add-name">
<slot name="left-icon"/>
<slot name="name"/>
......@@ -53,10 +55,6 @@ export default {
type: String,
default: '',
},
cusClass: {
type: String,
default: '',
},
hasBorder: {
type: Boolean,
default: true,
......@@ -69,6 +67,7 @@ export default {
data () {
return {
showActivated: '',
focus: '',
hasTouchEvent: 'ontouchstart' in document,
Icon: require('./right-gray@2x.png'),
}
......@@ -91,9 +90,15 @@ export default {
// 移动浏览器中长按元素会触发显示菜单，导致touchend事件不会触发，需要阻止该行为
e.preventDefault()
},
focusin (e) {
this.focus = 'focus'
},
focusout (e) {
this.focus = ''
},
start (e) {
if (e.target.readOnly) return
if (e.target.nodeName === 'INPUT' || e.target.nodeName === 'TEXTAREA' || e.target.nodeName === 'BUTTON') return
if (e.target.nodeName === 'INPUT' || e.target.nodeName === 'TEXTAREA' || e.target.nodeName === 'BUTTON' || e.target.nodeName === 'LABEL') return
this.showActivated = 'activated'
},
end (e) {
......@@ -109,6 +114,7 @@ export default {
</script>
<style lang="less">
@import "../../common/styles/variables";
.hls-item {
//height: 100px;
width: 100%;
......@@ -158,7 +164,7 @@ export default {
content: '*';
color: #D24E4E;
height: 8px;
padding-top: 4px;
padding-top: 2px;
margin-left: 2px;
}
}
......@@ -178,6 +184,14 @@ export default {
word-break: break-all;
word-wrap: break-word;
line-height: 20px;
.h-checkbox{
.checkbox {
input{
width: 22px;
height: 22px;
}
}
}
//输入框
input {
......@@ -219,8 +233,8 @@ export default {
}
.toggle.toggle-positive input:checked + .track {
border-color: @check-box-bg;
background-color: @check-box-bg;
border-color: @switch-box-bg;
background-color: @switch-box-bg;
.handle {
width: 22.5px;
......@@ -232,4 +246,25 @@ export default {
}
}
}
@media (device-width: 320px) and (device-height: 568px) {
.hls-item{
.contents{
.add-content{
.toggle-check {
.track {
.handle{
top:4px
}
}
}
.toggle.toggle-positive input:checked + .track{
.handle {
top:4px
}
}
}
}
}
}
</style>
packages/components/Radio/README.md 0 → 100755
View file @ 63a57615
h-radio 单选框组建
```html
<template>
<h-view>
<h-content>
<list-item>
<item>
<section slot="name">注册国家</section>
<radio-group slot="content" v-model="radioValue">
<h-radio :checked="true" name="China" title="中国"/>
<h-radio :disable="true" name="Japan" title="日本"/>
<h-radio name="Other" title="其他"/>
</radio-group>
</item>
</list-item>
<radio-group v-model="radioValue">
<h-radio name="China" title="中国"/>
<h-radio :checked="true" :disable="true" name="Japan" title="日本"/>
<h-radio name="Other" title="其他"/>
</radio-group>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'RadioTest',
data () {
return {
radioValue: 'Japan',
}
},
watch: {
radioValue (value) {
console.log(value)
},
},
methods: {},
}
</script>
<style scoped lang="less">
.hls-list-item{
.hls-item{
.radio-group{
display: flex;
.h-radio{
margin-right: 5px;
}
}
}
}
</style>
```
单选框组建必须配合radio-group使用表示一组
style
@radio-box-bg checkbox选中是的背景颜色
v-model 绑定radio的选中返回的name值
disable 是否只读 true/false
checked 是否默认选中
name radio选中时返回的value
title radio对应的value描述
@radioClick 点击radio的触发函数 返回当前选中的value值
packages/components/Radio/index.vue 0 → 100644
View file @ 63a57615
/**
* @Author think
* @Date 2019-07-10 13:51
*/
<template>
<section class="radio-group">
<slot/>
</section>
</template>
<script>
import radio from './radio'
export default {
name: 'RadioGroup',
component: { radio },
props: {
disable: {
type: Boolean,
default: false,
},
},
data () {
return {
radioList: [],
}
},
methods: {
click (value) {
this.$emit('input', value)
this.$emit('radioClick', value)
},
},
}
</script>
<style lang="less">
</style>
packages/components/Radio/radio.vue 0 → 100644
View file @ 63a57615
/**
* @Author think
* @Date 2019-07-10 13:57
*/
<template>
<section class="h-radio" @click="click">
<div :class="{'disable':disable}" class="radio-icon">
<i :class="icon" class="icon"/>
</div>
<span class="radio-title" v-text="title"/>
</section>
</template>
<script>
let CHECKEDCLASS = 'ion-ios-checkmark'
let DEFAULTCLASS = 'ion-ios-circle-outline'
export default {
name: 'Radio',
props: {
disable: {
type: Boolean,
default: false,
},
title: {
type: String,
default: '',
},
name: {
type: String,
default: '',
},
checked: {
type: Boolean,
default: false,
},
},
data () {
return {
icon: DEFAULTCLASS,
}
},
watch: {},
mounted () {
this.$parent && this.$parent.radioList.push(this)
this.icon = this.checked ? CHECKEDCLASS : DEFAULTCLASS
this.disable = this.disable ? this.disable : this.$parent.disable
},
destroyed () {
this.$parent && this.$parent.radioList.splice(this.$parent.radioList.indexOf(this), 1)
},
methods: {
click () {
let vm = this
if (!vm.disable) {
vm.$parent.radioList.forEach(item => {
item.icon = DEFAULTCLASS
})
vm.icon = CHECKEDCLASS
this.$parent.click(this.name)
}
},
},
}
</script>
<style lang="less">
@import "../../common/styles/variables";
.h-radio {
display: flex;
height: 100%;
align-items: center;
.radio-icon {
width: 26px;
height: 26px;
.icon {
font-size: 26px;
}
.ion-ios-circle-outline{
color: #d9d9d9;
}
.ion-ios-checkmark{
color: @radio-box-bg;
}
}
.disable{
opacity: .7;
}
.radio-title{
line-height: 0.5rem;
font-size: 16px;
color: #333;
margin-left: 6px;
}
}
</style>
packages/components/STab/index.vue
View file @ 63a57615
<template>
<section :class="[c(),tabCss, cusClass,overFlow]" >
<section :class="[cusClass,overFlow]" class="hls-switch-tab" >
<section :style="transform" class="tab-content">
<slot/>
</section>
......@@ -10,10 +10,14 @@ import { base } from '../../common/mixins'
import stabItem from './tab-item'
export default {
name: 'SwitchTab',
name: 'STab',
mixins: [base],
component: { stabItem },
props: {
value: {
type: Number,
default: 0,
},
position: {
type: String,
default: 'top',
......@@ -34,6 +38,10 @@ export default {
type: Boolean,
default: true,
},
hasBorder: {
type: Boolean,
default: false,
},
},
data () {
return {
......@@ -47,12 +55,9 @@ export default {
overFlow () {
return this.overflowX ? 'auto-overflow-x' : ''
},
tabCss () {
return this.position === 'top' ? this.c('top') : this.c('bottom')
},
count () {
this.length = this.items.length
return this.items.length
return this.length
},
current () {
let vm = this
......@@ -68,16 +73,40 @@ export default {
transform () {
return {
transform: 'translateX(' + this.translate + 'px' + ')',
// transition: 'right 0.3s cubic-bezier(0.35, 0, 0.25, 1), left 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s;',
// transition: 'right 0.3s cubic-bezier(0.35, 0, 0.25, 1), left 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s;',
}
},
},
watch: {
value (value) {
if (value > this.count - 1) {
throw 'tab index out of bound exception'
} else {
this.defaultActive === value
this.setTabActive(value)
}
},
},
mounted () {
let vm = this
this.items[vm.current].$el.classList.add('activated')
this.scrollToActiveTab(vm.current, this.items[vm.current].$el.clientWidth)
if (vm.value > vm.count - 1) {
throw 'tab index out of bound exception'
} else {
vm.setTabActive(vm.value)
}
},
methods: {
setTabActive (index) {
let vm = this
vm.items.forEach(item => {
item.$el.classList.remove('activated')
})
setTimeout(() => {
this.items[index].$el.classList.add('activated')
}, 100)
let width = this.items[index].$el.clientWidth
this.actived(index, width)
},
actived (index, clientWidth) {
this.activedIndex = index
this.$emit('tabClick', index)
......@@ -118,7 +147,7 @@ export default {
.hls-switch-tab {
width: 100%;
// position: absolute;
position: relative;
z-index: 1;
display: flex;
// justify-content: space-around;
......
packages/components/STab/tab-item.vue
View file @ 63a57615
<template>
<section class="h-tab-item" @click="titleClick">
<section :class="[tabClass]" class="h-tab-item" @click="titleClick">
<div class="h-item">
<slot/>
<div class="bottom-border"/>
</div>
<div v-show="showDivider" class="tab-divider"/>
</section>
......@@ -20,6 +21,11 @@ export default {
showDivider () {
return this.$parent.showDivider
},
tabClass () {
if (this.$parent.hasBorder) {
return this.$parent.position === 'top' ? 'vue-1px-b' : 'vue-1px-t'
}
},
},
mounted () {
this.$parent && this.$parent.items.push(this)
......@@ -59,9 +65,11 @@ export default {
display: flex;
align-items: center;
justify-content: center;
position: relative;
.h-item {
//width: 100%;
width: 100%;
min-width: 80px;
font-size: 14px;
height: 40px;
color: #7c828d;
......@@ -71,12 +79,19 @@ export default {
justify-content: center;
// padding: 0 3px;
border-bottom: 1px solid rgba(255, 255, 255, .0); /*no*/
.bottom-border{
bottom: 0;
}
}
&.activated {
.h-item {
color: #1e8ceb;
border-bottom: 1px solid #1e8ceb; /*no*/
color: @headerColor;
.bottom-border{
width: 65%;
position: absolute;
border-bottom: 1px solid @headerColor; /*no*/
}
}
}
.tab-divider {
......
packages/components/Select/select.vue
View file @ 63a57615
......@@ -3,13 +3,22 @@
<h-content
:class="{'show-select-up': state == 1}"
class="show-select-wrapper">
<popup-header
<!-- <popup-header
:left-text="cancelText"
:right-text="confirmText"
:title="popupTitle"
@on-click-left="returnItem(-1)"
@on-click-right="returnItem(1)"/>
<picker
@on-click-right="returnItem(1)"/>-->
<h-header style="padding-top: 0">
<div slot="left" class="h-header-btn" @click="returnItem(-1)">
{{ cancelText }}
</div>
<div slot="center">{{ popupTitle }}</div>
<div slot="right" class="h-header-btn" @click="returnItem(1)">
{{ confirmText }}
</div>
</h-header>
<Picker
:data="list"
v-model="tempValue"
:columns="3"
......@@ -30,9 +39,11 @@
width: 100%;
height: 100%;
background-color: transparent;
&.active {
background-color: rgba(0, 0, 0, 0.2);
}
.show-select-wrapper {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
......@@ -46,10 +57,15 @@
top: auto;
padding-top: 0px;
background-color: #fff;
.vux-popup-header {
// border-bottom: 1px solid rgba(0,0,0,.1) !important; /*no*/
}
.h-header {
.h-header-left .h-header-btn {
color: #828282;
}
.h-header-right .h-header-btn {
color: #5D98F6;
}
}
}
.show-select-up {
......@@ -65,7 +81,12 @@
<script>
import assign from 'object-assign'
import { Picker } from 'vux'
export default {
components: {
Picker
},
data () {
return {
defaultOptions: {
......@@ -120,9 +141,9 @@ export default {
let vm = this
if (index > -1) {
let code = vm.code
let code_name = vm.code + '_n' // eslint-disable-line
let code_name = vm.code + '_n' // eslint-disable-line
vm.object[code] = vm.value
vm.object[code_name] = vm.name // eslint-disable-line
vm.object[code_name] = vm.name // eslint-disable-line
vm.callBack(vm.index, vm.object, vm.childs)
}
this.state = 0
......
packages/components/ShowPicture/README.md
View file @ 63a57615
......@@ -7,6 +7,14 @@ showBigPicture查看大图 插件形式调用
hlsPopup.showBigPicture({
imgUrl: 'http://hlsapp.hand-china.com/hls_file/2018/05/F1B6D85E409A4714A8540504B2D133AD'
})
},
},
let list = [{imgUrl:'base64'},{imgUrl:'http://XXX'}]
showBigPicture() {
ShowPicturePlugin.show({
imgList: list,
startPosition: 1,
})
},
```
packages/components/ShowPicture/showpicture.vue
View file @ 63a57615
<template>
<div :class="{'active': state == 1}" class="show-picture show-picture-backdrop">
<view-box>
<div
:class="{'show-picture-up': state == 1}"
class="content scroll-content ionic-scroll show-picture-wrapper">
<div ref="pad" class="pad">
<img
v-hls-img-zoom
v-tap="hide"
v-longtap="sharePicture"
:src="imgUrl"
:alt="imgTitle">
</div>
<div
:class="{'show-picture-up': state == 1}"
class="content scroll-content ionic-scroll show-picture-wrapper">
<div ref="pad" class="pad">
<img
v-hls-img-zoom
v-tap="hide"
v-longtap="sharePicture"
v-lazy="imgUrl"
v-if="!imgList.length"
:alt="imgTitle">
<swipe
v-if="imgList.length" :index.sync="startPosition" :auto="false" :show-indicators="false">
<swipe-item
v-for="(item,index) in imgList" :key="index">
<img
v-hls-img-zoom
v-tap="hide"
v-longtap="sharePicture"
v-lazy="item.imgUrl || item.content"
:alt="imgTitle">
</swipe-item>
</swipe>
</div>
</view-box>
<div v-if="imgList.length" class="indicators">{{ startPosition + 1 }}/{{ imgList.length }}</div>
</div>
</div>
</template>
<style lang="less" scoped>
<style lang="less">
.show-picture-backdrop {
-webkit-transition: background-color 150ms ease-in-out;
transition: background-color 150ms ease-in-out;
......@@ -27,12 +39,15 @@
width: 100%;
height: 100%;
background-color: transparent;
.weui-tab {
width: 100%;
}
&.active {
background-color: rgba(0, 0, 0, 0.6);
}
.show-picture-wrapper {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
......@@ -40,6 +55,7 @@
transition: all cubic-bezier(0.36, 0.66, 0.04, 1) 500ms;
position: absolute;
width: 100%;
background-color: rgba(0, 0, 0, .5);
//max-width: 500px;
height: 100%;
margin: auto;
......@@ -49,54 +65,107 @@
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
.pad {
//width: 100%;
//height: 100%;
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
-webkit-justify-content: center;
-webkit-align-items: center;
img {
width: 100%;
height: 100%;
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
-webkit-justify-content: center;
-webkit-align-items: center;
object-fit: cover;
width: fit-content;
}
}
}
.show-picture-up {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hls-swipe {
.hls-swipe-track {
display: flex !important;
align-items: center !important;
.hls-swipe-item {
display: flex;
justify-content: center;
}
}
}
.indicators{
top:20px;
position: absolute;
color: #fff;
font-size: 16px;
}
}
.modal-open [vum-show-picture] {
pointer-events: auto;
}
.platform-ios{
.show-picture-backdrop {
.indicators{
top:40px;
}
}
}
// iPhoneX适配
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
.platform-ios {
.show-picture-backdrop {
.indicators{
top:60px;
}
}
}
}
// iPhoneX Max适配
@media (device-width: 414px) and (device-height: 896px) {
.platform-ios {
.show-picture-backdrop {
.indicators{
top:60px;
}
}
}
}
</style>
<script>
import assign from 'object-assign'
import SwipeItem from '../Swipe/SwipeItem'
import Swipe from '../Swipe/index'
export default {
component: {
'swipe': Swipe,
'swipe-item': SwipeItem,
},
data () {
return {
defaultOptions: {
imgUrl: '',
imgList: [],
startPosition: 0,
imgTitle: '',
index: '1',
width: '100',
},
imgUrl: '',
imgList: [],
startPosition: 0,
imgTitle: '',
index: '1',
state: 0,
width: '100',
}
......@@ -117,6 +186,8 @@ export default {
this.imgUrl = _options.imgUrl
this.imgTitle = _options.imgTitle
this.width = _options.width
this.imgList = _options.imgList || []
this.startPosition = _options.startPosition
this.state = 1
if (!this.width) {
this.width = 100
......@@ -137,7 +208,7 @@ export default {
},
sharePicture () {
// var reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/
window.plugins.socialsharing.share(null, null, this.imgUrl, null)
// window.plugins.socialsharing.share(null, null, this.imgUrl, null)
},
},
}
......
packages/components/Switch/README.md 0 → 100755
View file @ 63a57615
checkBox 配合 ListItem组件调用
```html
<list-item>
<item :show-arrow="true">
<img slot="left-icon" src="../assets/myInfo/version@2x.png" class="left-icon">
<div slot="name">检查更新</div>
<h-switch slot="content" v-model="savePhoto" @switchClick="savePhotoFun"></h-switch>
</item>
</list-item>
export default {
data() {
return {
savePhoto: false,
}
},
methods: {
savePhotoFun(value) {
this.savePhoto = value;
}
}
}
```
style
@switch-box-bg switch选中时的背景颜色
v-model 绑定value值 true/false
disable 是否只读 true/false
@switchClick toggle点击触发函数 返回当前value值
packages/components/Switch/index.vue 0 → 100755
View file @ 63a57615
<template>
<label
:class="cusClass" class="toggle toggle-positive toggle-check"
@click.prevent="checked">
<input :checked="value" :disabled="disable" type="checkbox">
<div class="track">
<div class="handle"/>
</div>
</label>
</template>
<script>
export default {
name: 'HSwitch',
props: {
value: {
type: Boolean,
default: false,
},
disable: {
type: Boolean,
default: false,
},
cusClass: {
type: String,
default: '',
},
},
data () {
return {
// clickValue: false
}
},
computed: {},
watch: {},
methods: {
checked () {
if (!this.disable) {
this.$emit('input', !this.value)
this.$emit('switchClick', !this.value)
}
},
},
}
</script>
<style lang="less">
@import "../../common/styles/variables";
.toggle-check {
display: flex;
justify-content: space-between;
align-items: center;
.track {
width: 40px;
height: 25px;
margin-right: 2.5px;
border-radius: 15px;
.handle {
width: 22.5px;
height: 22.5px;
top: 3.5px;
left: 2.5px;
}
}
}
.toggle.toggle-positive input:checked + .track {
border-color: @switch-box-bg;
background-color: @switch-box-bg;
.handle {
width: 22.5px;
height: 22.5px;
top: 3.5px;
left: 9px;
}
}
@media (device-width: 320px) and (device-height: 568px) {
.toggle-check {
.track {
.handle {
top: 4px
}
}
.toggle.toggle-positive input:checked + .track {
.handle {
top: 4px
}
}
}
}
</style>
packages/components/component.js
View file @ 63a57615
import VueLazyload from 'vue-lazyload'
import HView from './HView/index'
import HHeader from './HHeader/index'
import HContent from './HContent/index'
......@@ -10,18 +11,31 @@ import Swipe from './Swipe/index'
import SwipeItem from './Swipe/SwipeItem'
import ListItem from './ListItem/ListItem'
import Item from './ListItem/Item'
import CheckBox from './CheckBox/index'
import Switch from './Switch/index'
import Spin from './Spin/index'
import TopTip from './TopTip/index'
import Notify from './Dialog/Notify'
import Stab from './STab/index'
import TabItem from './STab/tab-item'
import CheckBox from './CheckBox/index'
import RadioGroup from './Radio/index'
import Radio from './Radio/radio'
import HFile from './HFile/index'
import BottomTab from './BottomTab/index'
import TabButton from './BottomTab/tab-button'
import Modal from './Modal/Modal'
import HLayout from './HLayout/index'
import CurrencyInput from './CurrencyInput/index'
import errLoadingPic from '../common/picture/errloading.jpg'
export default (Vue) => {
Vue.use(VueLazyload, {
error: errLoadingPic,
loading: errLoadingPic,
})
Vue.component('h-view', HView)
Vue.component('h-header', HHeader)
Vue.component('h-content', HContent)
......@@ -38,10 +52,16 @@ export default (Vue) => {
Vue.component('spin', Spin)
Vue.component('top-tip', TopTip)
Vue.component('notify', Notify)
Vue.component('check-box', CheckBox)
Vue.component('h-switch', Switch)
Vue.component('s-tab', Stab)
Vue.component('tab-item', TabItem)
Vue.component('bottom-tab', BottomTab)
Vue.component('tab-button', TabButton)
Vue.component('h-modal', Modal)
Vue.component('h-check', CheckBox)
Vue.component('radio-group', RadioGroup)
Vue.component('h-radio', Radio)
Vue.component('h-file', HFile)
Vue.component('h-layout', HLayout)
Vue.component('currency-input', CurrencyInput)
}
packages/index.js
View file @ 63a57615
// components
import BottomTab from './components/BottomTab/index'
import Switch from './components/Switch/index'
import CheckBox from './components/CheckBox/index'
import RadioGroup from './components/Radio/index'
import Radio from './components/Radio/radio'
import Notify from './components/Dialog/Notify'
import HButton from './components/HButton/index'
import HContent from './components/HContent/index'
......@@ -19,24 +22,22 @@ import TopTip from './components/TopTip/index'
import Stab from './components/STab/index'
import TabItem from './components/STab/tab-item'
import TabButton from './components/BottomTab/tab-button'
import HFile from './components/HFile/index'
import HLayout from './components/HLayout/index'
import CurrencyInput from './components/CurrencyInput/index'
import componentInstall from './components/component'
// compontenPlugins
import ActionSheetPlugin from './components/ActionSheet/index'
import ShowPicturePlugin from './components/ShowPicture/index'
import SelectPlugin from './components/select/index'
import NotifyPlugin from './components/Dialog/plugins/index'
import HlsModalPlugin from './components/Modal/index'
import NumberKeyboardPlugin from './components/NumberKeyboard/index'
import componentInstall from './components/component'
// styles
import appStyle from '../packages/common/styles/app.core.less'
import hlsPopup from '../packages/common/scripts/hlsPopup'
import hlsUtil from '../packages/common/scripts/hlsUtil'
import { post, get } from '../packages/common/scripts/hlsHttp'
import directives from '../packages/common/scripts/directives'
import filter from '../packages/common/scripts/filter'
const version = '0.0.2'
const version = '0.0.5'
export {
appStyle,
......@@ -52,7 +53,10 @@ export {
SwipeItem,
ListItem,
Item,
Switch,
CheckBox,
RadioGroup,
Radio,
Spin,
TopTip,
Notify,
......@@ -60,18 +64,14 @@ export {
TabItem,
BottomTab,
TabButton,
HFile,
HLayout,
CurrencyInput,
ActionSheetPlugin,
ShowPicturePlugin,
SelectPlugin,
NotifyPlugin,
HlsModalPlugin,
NumberKeyboardPlugin,
version,
componentInstall,
hlsPopup,
hlsUtil,
post,
get,
directives,
filter,
}
src/App.vue
View file @ 63a57615
......@@ -17,6 +17,7 @@ export default {
return {
pathList: [],
transitionName: 'slide-left',
skeleton: require('./assets/skeleton.svg'),
}
},
watch: { // 监听路由变化
......@@ -35,6 +36,7 @@ export default {
this.$router.isBack = true
this.pathList = []
}
this.$el.className = 'home-skeleton'
let isBack = this.$router.isBack
if (isBack) {
this.transitionName = 'router-slide-right'
......@@ -75,4 +77,8 @@ export default {
//-webkit-overflow-scrolling: touch;
//overflow-scrolling: touch;
}
.home-skeleton{
background: url("assets/skeleton.svg") no-repeat fixed;
background-size: contain;
}
</style>
src/assets/skeleton-list.svg 0 → 100644
View file @ 63a57615
<svg width="750" height="1334" xmlns="http://www.w3.org/2000/svg">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<defs>
<filter id="svg_38_blur">
<feGaussianBlur stdDeviation="0" in="SourceGraphic"/>
</filter>
</defs>
<g>
<rect fill="#fff" id="canvas_background" height="1334" width="750" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
</g>
</g>
<g>
<title>列表</title>
<rect id="svg_16" height="28.000015" width="0" y="839.375118" x="375.49994" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#DDDDDD"/>
<rect opacity="0.5" stroke="#000" id="svg_25" height="190" width="656" y="99" x="46" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect opacity="0.5" stroke="#000" id="svg_30" height="60" width="656" y="311" x="46" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect stroke="#000" opacity="0.5" id="svg_31" height="136" width="656" y="413" x="46" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<ellipse stroke="#000" filter="url(#svg_38_blur)" opacity="0.7" ry="45" rx="45" id="svg_38" cy="484" cx="112" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect opacity="0.7" stroke="#000" id="svg_40" height="24" width="302" y="431" x="177" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect opacity="0.7" stroke="#000" id="svg_41" height="24" width="388" y="471" x="177" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect opacity="0.7" stroke="#000" id="svg_42" height="24" width="448" y="509" x="177" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect stroke="#000" opacity="0.5" id="svg_31" height="136" width="656" y="573" x="46" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<ellipse stroke="#000" filter="url(#svg_38_blur)" opacity="0.7" ry="45" rx="45" id="svg_38" cy="644" cx="112" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect opacity="0.7" stroke="#000" id="svg_40" height="24.000013" width="302" y="591" x="177" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect opacity="0.7" stroke="#000" id="svg_41" height="24.000013" width="388" y="631" x="177" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect opacity="0.7" stroke="#000" id="svg_42" height="24.000013" width="448" y="669" x="177" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect stroke="#000" opacity="0.5" id="svg_31" height="136" width="656" y="733" x="46" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<ellipse stroke="#000" filter="url(#svg_38_blur)" opacity="0.7" ry="45" rx="45" id="svg_38" cy="804" cx="112" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect opacity="0.7" stroke="#000" id="svg_40" height="24.000013" width="302" y="753" x="177" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect opacity="0.7" stroke="#000" id="svg_41" height="24.000013" width="388" y="791" x="177" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect opacity="0.7" stroke="#000" id="svg_42" height="24.000013" width="448" y="829" x="177" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect stroke="#000" opacity="0.5" id="svg_31" height="136" width="656" y="893" x="46" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<ellipse stroke="#000" filter="url(#svg_38_blur)" opacity="0.7" ry="45" rx="45" id="svg_38" cy="964" cx="112" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect opacity="0.7" stroke="#000" id="svg_40" height="24.000013" width="302" y="921" x="177" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect opacity="0.7" stroke="#000" id="svg_41" height="24.000013" width="388" y="951" x="177" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect opacity="0.7" stroke="#000" id="svg_42" height="24.000013" width="448" y="989" x="177" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect stroke="#000" opacity="0.5" id="svg_31" height="136" width="656" y="1053" x="46" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<ellipse stroke="#000" filter="url(#svg_38_blur)" opacity="0.7" ry="45" rx="45" id="svg_38" cy="1124" cx="112" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect opacity="0.7" stroke="#000" id="svg_40" height="24.000013" width="302" y="1071" x="177" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect opacity="0.7" stroke="#000" id="svg_41" height="24.000013" width="388" y="1111" x="177" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect opacity="0.7" stroke="#000" id="svg_42" height="24.000013" width="448" y="1149" x="177" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
</g>
</svg>
src/assets/skeleton.svg 0 → 100644
View file @ 63a57615
<svg width="750" height="1334" xmlns="http://www.w3.org/2000/svg">
<g>
<rect fill="#fff" id="canvas_background" height="1334" width="750" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
</g>
</g>
<g>
<rect opacity="0.7" stroke="#000" id="svg_1" height="200" width="656" y="89" x="46" stroke-width="0" fill="#DDDDDD"/>
<ellipse opacity="0.7" stroke="#000" ry="50" rx="50" id="svg_3" cy="408" cx="93" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<ellipse opacity="0.7" stroke="#000" ry="50" rx="50" id="svg_4" cy="408" cx="284" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<ellipse opacity="0.7" stroke="#000" ry="50" rx="50" id="svg_8" cy="408" cx="469" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<ellipse opacity="0.7" stroke="#000" ry="50" rx="50" id="svg_9" cy="408" cx="651" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<ellipse opacity="0.7" stroke="#000" ry="50" rx="50" id="svg_10" cy="576" cx="93" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<ellipse opacity="0.7" stroke="#000" ry="50" rx="50" id="svg_11" cy="576" cx="284" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<ellipse opacity="0.7" stroke="#000" ry="50" rx="50" id="svg_12" cy="576" cx="469" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<ellipse opacity="0.7" stroke="#000" ry="50" rx="50" id="svg_13" cy="576" cx="651" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect stroke="#000" opacity="0.7" id="svg_14" height="80" width="656" y="689" x="46" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect id="svg_16" height="28.000015" width="0" y="839" x="375" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#DDDDDD"/>
<rect stroke="#000" opacity="0.7" id="svg_17" height="30" width="656" y="805" x="46" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect stroke="#000" opacity="0.7" id="svg_18" height="30" width="656" y="867" x="46" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect stroke="#000" opacity="0.7" id="svg_19" height="30" width="656" y="927" x="46" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect stroke="#000" opacity="0.7" id="svg_20" height="30" width="656" y="987" x="46" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect stroke="#000" opacity="0.7" id="svg_21" height="30" width="656" y="1047" x="46" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect stroke="#000" opacity="0.7" id="svg_22" height="30" width="656" y="1107" x="46" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect stroke="#000" opacity="0.7" id="svg_23" height="30" width="656" y="1167" x="46" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
<rect stroke="#000" opacity="0.7" id="svg_24" height="30" width="656" y="1227" x="46" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#DDDDDD"/>
</g>
</svg>
src/common/layout.json 0 → 100644
View file @ 63a57615
{
"layoutData": [
{
"code":"form",
"formName": "formOne",
"readOnly": false,
"dataName": "formOne",
"fileds": [
{
"filedName": "filedOne",
"type": "text",
"VModelName": "",
"filedType": "input",
"description": "第一个filed",
"iconPath": "http://hlsapp.hand-china.com/file/hel_dev/function/partner@2x.png",
"rightArrow": true,
"defaultValue": "",
"placeholder": "请输入第一个filed的值",
"proportion": [2,2],
"readOnly": false,
"request": true,
"selectList": [],
"moneyFormat": false
},
{
"filedName": "filedTwo",
"type": "text",
"VModelName": "",
"filedType": "select",
"description": "第二个filed",
"iconPath": "http://hlsapp.hand-china.com/file/hel_dev/function/partner@2x.png",
"rightArrow": true,
"defaultValue": "",
"placeholder": "请选择",
"proportion": [2,2],
"readOnly": true,
"request": true,
"selectList": [],
"moneyFormat": false
},
{
"filedName": "filedThree",
"type": "text",
"VModelName": "",
"filedType": "time",
"description": "第三个filed",
"iconPath": "",
"rightArrow": true,
"defaultValue": "",
"placeholder": "请选择时间",
"proportion": [2,2],
"readOnly": true,
"request": true,
"selectList": [],
"moneyFormat": false
},
{
"filedName": "filedFour",
"type": "number",
"VModelName": "",
"filedType": "div",
"description": "第四个filed",
"iconPath": "http://hlsapp.hand-china.com/file/hel_dev/function/partner@2x.png",
"rightArrow": false,
"defaultValue": "",
"placeholder": "",
"proportion": [2,2],
"readOnly": true,
"request": true,
"selectList": [],
"moneyFormat": true
}
]
},
{
"code": "button",
"btnName": "按钮",
"isBottom": false,
"btns": [
{
"btnCode": "btnOne",
"btnText": "按钮1"
},
{
"btnCode": "btnTwo",
"btnText": "按钮2"
},
{
"btnCode": "btnThree",
"btnText": "按钮3"
}
]
}
],
"bottomBtns": [
{
"code": "button",
"btnName": "按钮",
"isBottom": true,
"btns": [
{
"btnCode": "btnFour",
"btnText": "按钮4"
},
{
"btnCode": "btnFive",
"btnText": "按钮5"
}
]
}
]
}
src/main.js
View file @ 63a57615
......@@ -2,30 +2,36 @@
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import FastClick from 'fastclick'
import axios from 'axios'
import App from './App'
import Vuex from 'vuex'
import vuexI18n from 'vuex-i18n'
import router from './router/index'
import flexible from './common/ydui.flexible'
import {componentInstall, appStyle, hlsUtil, get, post, hlsPopup, directives, filter} from '../packages/index'
import {componentInstall, appStyle} from '../packages/index'
/**
* 组件
* 指令
*/
import directives from './scripts/directives'
import {
ViewBox,
Tabbar,
TabbarItem,
XHeader,
Picker,
PopupHeader,
} from 'vux'
import filter from './scripts/filter'
import './scripts/prototype'
import './scripts/vuePlatform'
/**
* 弹框组件
*/
import hlsPopup from './scripts/hlsPopup'
/**
* http
*/
import {post, get} from './scripts/hlsHttp'
/** 全局函数hlsUtil**/
import hlsUtil from './scripts/hlsUtil'
/** end**/
......@@ -41,25 +47,9 @@ Vue.use(directives)
Vue.use(filter)
Vue.use(Vuex)
// Vue.directive('transfer-dom', TransferDom);
Vue.component('x-header', XHeader)
Vue.component('view-box', ViewBox)
Vue.component('tabbar', Tabbar)
Vue.component('tabbar-item', TabbarItem)
Vue.component('PopupHeader', PopupHeader)
Vue.component('picker', Picker)
/** i18n **/
let store = new Vuex.Store({
modules: {
i18n: vuexI18n.store,
},
})
Vue.use(vuexI18n.plugin, store)
Vue.prototype.hlsPopup = window.hlsPopup = hlsPopup
Vue.prototype.$devicePixelRatio = 2
Vue.prototype.axios = window.axios = axios
Vue.prototype.$post = post
Vue.prototype.$get = get
......@@ -87,7 +77,7 @@ Vue.prototype.$routeGo = routeGo
let hlsExit = function () {
if (vum.Platform.isIOS()) {
cordova.exec(null, null, 'BridgePlugin', 'closeWebView', [])
} else if (vum.Platform.isIOS()) {
} else {
var dict = {
'className': 'WebBridge',
'function': 'close',
......@@ -104,7 +94,8 @@ FastClick.attach(document.body)
Vue.config.productionTip = false
vum.$vumPlatform.ready(function () {
if (process.env.isMobilePlatform) {
if ((vum.Platform.isAndroid()) || (vum.Platform.isIOS())) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true)
cordova.plugins.Keyboard.disableScroll(true)
}
})
......
src/pages/fileTest.vue 0 → 100644
View file @ 63a57615
/**
* @Author think
* @Date 2019-07-11 11:04
*/
<template>
<h-view title="HFile">
<h-header>
<div slot="left" class="h-header-btn" @click="$routeGo()">
<i class="ion-ios-arrow-back"/>
</div>
<div slot="center">HFile</div>
</h-header>
<h-content>
<h-file
:fileList="fileList" v-model="fileList" :upload="upload"
:uploadConfig="uploadConfig" :disabled="disable" :accept="accept" :beforeRead="beforeRead"
:afterRead="afterRead" :maxCount="maxCount" :max-size="maxSize" :previewImage="previewImage"
:deleteImage="deleteImage"
:result-type="resultType"
@upload="uploaded"
@delete="deletePic"
@oversize="oversize">
<div class="file-chose">
文件上传 <i class="icon ion-ios-cloud-upload"/>
</div>
</h-file>
<list-item>
<item>
<div slot="name">融资额</div>
<currency-input slot="content" v-model="money"/>
<div slot="right-icon">¥</div>
</item>
</list-item>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'FileTest',
data () {
return {
fileList: [], // 文件数组 必填
disable: false, // 是否禁用文件上传 默认false 可选
accept: 'image/png,image/jpeg', // 接受的文件类型 可选
upload: false, // 选取完成是否自动上传 默认 false 可选
maxSize: 2000000, // 文件大小限制，单位为byte 可选 超过大小的文件会自动取消
maxCount: 5, // 文件上传数量限制 可选超过数量自动隐藏选择按钮
deleteImage: true, // 是否删除文件 默认true 可选
previewImage: true, // 是否在选取完成后展示预览图 默认true 可选
resultType: 'dataUrl', // 文件读取结果类型 dataUrl 可选值为text
uploadConfig: { // 文件上传配置
uploadUrl: $config.rootPath + '/app/fileUploadSvc?sysName=HLS_APP&apiName=attachment_upload', // 上传的URL
params: { // 上传的额外参数
user_id: 1,
source_type: 'HLS_DOC_FILE_TEMPLET',
pkvalue: 42,
},
uploadSuccess: this.fileSuccess, // 上传成功后的回调函数 用于给文件添加服务端唯一标示或其他
},
money: null,
}
},
methods: {
/**
* email事件 可选
* 删除文件后触发 返回当前文件以及 对应的index
* @param file
* @param index
*/
deletePic (file, index) {
debugger
},
/**
* 可选
* 文件选择完成后读取前触发 返回当前选择的文件数组
* 返回 ture 或者promise对象 标示继续读取，否则终止 操作
* @param files 选择的文件数组
* @returns {boolean}
*/
beforeRead (files) {
files.forEach((file, index) => {
console.log(file.size)
})
return true
},
/**
* 可选
* 文件读取成功后触发添加了文件的content内容
* @param files 选择的文件数组
* @returns {boolean}
*/
afterRead (files) {
files.forEach((item, index) => {
console.log(item.file.name)
})
return true
},
/**
* email事件 可选
* 全部文件上传成功后触发
* @param fileList 全部文件数组
*/
uploaded (fileList) {
debugger
},
/**
* email事件 可选
* 文件大小超过配置的大小
* @param files
*/
oversize (files) {
debugger
},
/**
* 每个文件上传成功后的回调 可选配置
* @param fileList 文件数组
* @param result 上传返回结果
*/
fileSuccess (fileList, result) {
this.fileList = fileList
debugger
this.fileList.forEach((itemFile, index) => {
if (result.response && itemFile.file && !itemFile.attachment_id && result.response.fileName === itemFile.file.name) {
itemFile.attachment_id = result.response.attachment_id
}
})
},
},
}
</script>
<style scoped lang="less">
.content{
.h-file{
.file-chose{
width: 110px;
height: 44px;
background-color: #07c160;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: 4px;
.icon{
margin-left: 10px;
font-size: 20px;
//color: #fff;
}
}
}
}
</style>
src/pages/form.vue 0 → 100644
View file @ 63a57615
/**
* @Author think
* @Date 2019-07-16 20:00
*/
<template>
<h-view class="form" title="From">
<h-header>
<div slot="left" class="h-header-btn" @click="$hlsExit()">
<i class="ion-ios-arrow-back"/>
</div>
<div slot="center">From</div>
<div slot="right" class="h-header-btn">右边</div>
</h-header>
<h-layout
v-if="layoutShow"
:layout-data="layoutData" :show-form-title="showFormTitle" :show-btn-divider="true"
:show-tab-divider="true" :formData="data" v-model="data" :read-only="readOnly"
:show-btn="showBtn"
@tabClick="tabClick"
@showSelect="showSelect" @showTime="showTime" @filedClick="filedClick"
@btnClick="btnClick"/>
</h-view>
</template>
<script>
import layoutData from './layout.json'
export default {
name: 'Form',
data () {
return {
showFormTitle: true,
layoutData: [],
layoutShow: false,
readOnly: false,
showBtn: true,
data: {
contract: {
contract_id: 1,
postion: '01',
postion_n: '技术顾问',
enable_flag: false,
checkValue: true,
},
},
postionList: [
{code: '01', code_name: '技术顾问'},
{code: '02', code_name: '技术经理'},
{code: '03', code_name: '项目经理'},
],
}
},
created () {
let vm = this
/* axios.get('http://leafservice.hand-china.com/r/api/get/layoutCode?layoutCode=CON_QURERY', {
header: {'Content-Type': 'application/json',
'Authorization': 'bearer SRHJVdrftyGUYguyhiHiuiojmgrrcgv' },
}).then(res => {
vm.layoutData = res.rows
vm.layoutShow = true
}) */
setTimeout(() => {
vm.layoutData = layoutData
vm.layoutShow = true
}, 100)
},
methods: {
/**
* tab的点击事件
* @param index
*/
tabClick (index) {
this.tabIndex = index
},
showPostion (configCode, filedCode) {
let vm = this
vm.hlsPopup.selectList({
list: vm.postionList,
code: filedCode,
object: vm.data[configCode],
returnItem (index) {
vm.data[configCode][filedCode] = vm.postionList[index].code
vm.data[configCode][filedCode + '_n'] = vm.postionList[index].code_name
},
})
},
/**
* 下拉框点击事件
* @param configCode
* @param filedCode
*/
showSelect (configCode, filedCode) {
let vm = this
switch (filedCode) {
case 'postion':
vm.showPostion(configCode, filedCode)
break
default:
}
},
showOrderDate (configCode, filedCode) {
let vm = this
vm.hlsPopup.showTime({
callback (time) {
vm.data[configCode][filedCode] = time
},
})
},
/**
* 事件选择事件
* @param configCode
* @param filedCode
*/
showTime (configCode, filedCode) {
let vm = this
switch (filedCode) {
case 'order_date':
vm.showOrderDate(configCode, filedCode)
break
default:
}
},
/**
* 其他字端的点击事件
* @param configCode
* @param filedCode
*/
filedClick (configCode, filedCode) {
debugger
},
/**
* 按钮点击事件
* @param btn
*/
btnClick (btn) {
console.log(JSON.stringify(this.data, '', 2))
if (btn.btnType === 'BottomTab') {
if (btn.btnCode === 'save') {
alert('底部固定按钮的保存')
}
if (btn.btnCode === 'submit') {
alert('底部固定按钮的提交')
}
} if (btn.btnType === 'Button') {
if (btn.btnCode === 'nextBtn') {
alert('按钮继续')
}
}
},
},
}
</script>
<style lang="less">
.form {
}
</style>
src/pages/hlsPopup.vue
View file @ 63a57615
<template>
<h-view class="public-style hls-popup" style="height: 100%">
<h-view class="public-style hls-popup" style="height: 100%" title="封装测试">
<h-header class="bar-custom">
<div slot="left" class="h-header-btn" @click="$routeGo()">
<i class="ion-ios-arrow-back"/>
......@@ -9,7 +9,7 @@
操作
</div>
</h-header>
<!-- <s-tab :overflowX="true" :showDivider="true" class="has-header" :defaultActive="6">
<s-tab :overflowX="true" :showDivider="true" :defaultActive="6" :has-border="true">
<tab-item>工商资料</tab-item>
<tab-item>股东成员</tab-item>
<tab-item>对外投资</tab-item>
......@@ -22,8 +22,8 @@
<tab-item>失信记录</tab-item>
<tab-item>涉诉公告</tab-item>
<tab-item>司法协助</tab-item>
</s-tab>-->
<s-content class="has-footer">
</s-tab>
<h-content class="has-footer">
<h-button class="button-class" type="primary" @click.native="showLoading">showLoading</h-button>
<h-button class="button-class" type="primary" @click.native="hideLoading">hideLoading</h-button>
<h-button class="button-class" type="primary" @click.native="showLongTop">showLongTop</h-button>
......@@ -79,7 +79,9 @@
<h-button class="button-class radius-small" disabled>基础按钮(禁用)</h-button>
<h2 class="item-title">Swip基础使用</h2>
<swipe :interval="5000" @start="start" @move="move" @change="change" :defaultWidth="200">
<swipe
:interval="5000" :defaultWidth="200" @start="start" @move="move"
@change="change">
<swipe-item>
<div :style="{'background': bgColor[0]}" class="item-bg">0</div>
</swipe-item>
......@@ -92,7 +94,7 @@
</swipe>
<h2 class="item-title">纵向滚动</h2>
<swipe :vertical="true" style="height: 200px">
<swipe :vertical="true" style="height: 200px">
<swipe-item v-for="key in count" :key="key" :style="{'background': bgColor[key-1]}">
<div class="item-bg">{{ key-1 }}</div>
</swipe-item>
......@@ -180,14 +182,6 @@
</div>
</item-option>
</div>
<h2>picker</h2>
<picker
ref="picker1" :data="year7" :columns="3" v-model="year7Value"
style="width: 100%"
@on-change="change"/>
<list-item :item-height="45">
<item>
<img slot="left-icon" src="../assets/image/warning@2x.png" class="left-icon">
......@@ -209,18 +203,21 @@
<img slot="left-icon" src="../assets/image/warning@2x.png" class="left-icon">
<div slot="name">保存照片</div>
<label slot="right" class="toggle toggle-positive toggle-check" @click="savePhotoFun">
<input :checked="savePhoto" type="checkbox" >
<input :checked="savePhoto" type="checkbox">
<div class="track">
<div class="handle"/>
</div>
</label>
<check-box slot="content" v-model="savePhoto" @checkClick="savePhotoFun"/>
<h-switch slot="content" :disable="true" v-model="savePhoto" @switchClick="savePhotoFun"/>
</item>
<item>
<h-check slot="left-icon" v-model="radioValue" @checkClick="radioClick"/>
<section slot="content">CheckBox</section>
</item>
</list-item>
<h2 class="item-title">s-tab</h2>
<div class="local-region">
<s-tab :show-divider="true" @tabClick="stabClick" :overflowX="true">
<s-tab :show-divider="true" :overflowX="true" @tabClick="stabClick">
<tab-item>测试</tab-item>
<tab-item>你好</tab-item>
<tab-item>再见</tab-item>
......@@ -230,7 +227,9 @@
<tab-item>按钮4</tab-item>
</s-tab>
<s-tab :default-active="2" :show-divider="true" position="bottom" cusClass="class" @tabClick="stabClick" :overflowX="true">
<s-tab
:default-active="2" :show-divider="true" :overflowX="true" position="bottom"
cusClass="class" @tabClick="stabClick">
<tab-item><img src="../assets/image/warning@2x.png" style="width: 18px"></tab-item>
<tab-item><img src="../assets/image/warning@2x.png" style="width: 18px"></tab-item>
<tab-item><img src="../assets/image/warning@2x.png" style="width: 18px"></tab-item>
......@@ -239,8 +238,8 @@
</div>
<h2 class="item-title">Modal</h2>
<h-button class="button-class" type="primary" @click.native="showModal">Modal</h-button>
</h-content>
</s-content>
<bottom-tab :show-divider="true">
<tab-button cusClass="button-exit" @click.native="showConfirm"><img
......@@ -284,72 +283,18 @@ export default {
infiniteCount: 0,
deleteText: '删除',
editText: '编辑',
colors: [{name: 'Yellow', hex: '#f4d03f'}, {name: 'Green', hex: '#229954'}, {name: 'Purple', hex: '#9b59b6'}],
colors: [{ name: 'Yellow', hex: '#f4d03f' }, { name: 'Green', hex: '#229954' }, {
name: 'Purple',
hex: '#9b59b6',
}],
svgSrc: svg,
show1: false,
show2: false,
bp_name: '',
savePhoto: new Boolean(window.localStorage.savePhoto) || false,
year7Value: [],
year7: [{
name: '中国',
value: 'china',
parent: '0', // 为一级时可以不写 parent，但是此时允许为数字 0、空字符串或者字符串 '0'
}, {
name: '美国',
value: 'USA',
parent: '0',
}, {
name: '广东',
value: 'china001',
parent: 'china',
}, {
name: '广西',
value: 'china002',
parent: 'china',
}, {
name: '美国001',
value: 'usa001',
parent: 'USA',
}, {
name: '美国002',
value: 'usa002',
parent: 'USA',
}, {
name: '广州',
value: 'gz',
parent: 'china001',
}, {
name: '深圳',
value: 'sz',
parent: 'china001',
}, {
name: '广西001',
value: 'gx001',
parent: 'china002',
}, {
name: '广西002',
value: 'gx002',
parent: 'china002',
}, {
name: '美国001_001',
value: '0003',
parent: 'usa001',
}, {
name: '美国001_002',
value: '0004',
parent: 'usa001',
}, {
name: '美国002_001',
value: '0005',
parent: 'usa002',
}, {
name: '美国002_002',
value: '0006',
parent: 'usa002',
}],
modal: '',
showModalValue: false,
radioValue: true,
}
},
watch: {
......@@ -369,16 +314,16 @@ export default {
},
mounted () {
/* HlsModal.fromComponent(popup, {
cusClass:"login-modal",
onHide: () => {
console.log('modal hide')
},
onShow: () => {
console.log('modal show')
}
}).then((modal) => {
this.modal = modal;
}) */
cusClass:"login-modal",
onHide: () => {
console.log('modal hide')
},
onShow: () => {
console.log('modal show')
}
}).then((modal) => {
this.modal = modal;
}) */
},
methods: {
stab () {
......@@ -424,13 +369,13 @@ export default {
this.hlsPopup.hideLoading()
},
showLongTop () {
this.hlsPopup.showLongTop('操作成功操作成功操作成功操作成功操作成功操作成功操作成功操作成功操作成功')
this.hlsPopup.showLongTop('操作成功操作成功')
},
showLongCenter () {
this.hlsPopup.showLongCenter('操作成功操作成功操作成功')
this.hlsPopup.showLongCenter('操作成功操作成功')
},
showLongBottom () {
this.hlsPopup.showLongBottom('操作成功操作成功操作成功操作成功')
this.hlsPopup.showLongBottom('操作成功操作成功')
},
showSuccess () {
this.hlsPopup.showSuccess('操作成功')
......@@ -468,7 +413,7 @@ export default {
showActionSheetButton () {
this.hlsPopup.showActionSheet({
titleText: '照片',
buttonArray: [{text: '拍照', type: 'warn'}, {text: '从相册取', type: 'primary'}],
buttonArray: [{ text: '拍照', type: 'warn' }, { text: '从相册取', type: 'primary' }],
callback: (index) => {
alert(index)
},
......@@ -662,6 +607,11 @@ export default {
showModal () {
this.showModalValue = true
},
radioClick (value) {
this.radioValue = value
console.log(value)
},
},
}
</script>
......@@ -670,8 +620,9 @@ export default {
.hls-popup {
height: 100%;
width: 100%;
.hls-switch-tab {
.tab-content .h-tab-item .h-item{
.tab-content .h-tab-item .h-item {
width: 80px;
}
......@@ -680,9 +631,11 @@ export default {
.vue-better-scroll__wrapper {
width: 100%;
}
.list {
width: 100%;
}
.content {
.scrollContent {
display: flex;
......@@ -692,6 +645,7 @@ export default {
flex-direction: column;
-webkit-flex-direction: column;
}
.button-class {
width: 90%;
margin: 10px 5%;
......@@ -731,6 +685,7 @@ export default {
background-color: #7e57c2;
border: 1px solid #7e57c2;
}
.button {
background-color: @theme-color;
color: #ffffff;
......@@ -740,6 +695,7 @@ export default {
margin-top: 20px;
}
}
.item-bg {
height: 200px;
line-height: 200px;
......@@ -747,6 +703,7 @@ export default {
font-size: 20px;
font-weight: 500;
}
.indicators {
height: 14px;
width: 14px;
......@@ -770,6 +727,7 @@ export default {
.sign-modal {
top: 50%;
.content {
background-color: #fff;
}
......
src/pages/home.vue
View file @ 63a57615
<template>
<h-view id="home" class="public-style">
<h-view id="home" class="public-style" title="小易">
<h-header :has-border="false" class="bar-custom">
<div slot="left" class="h-header-btn" @click="$hlsExit()">
<i class="ion-ios-arrow-back"/>
</div>
<div slot="center">小易</div>
</h-header>
<scroll id="home-content" class="has-footer">
<div v-for="item in message" class="message">
<p v-show="false" class="message-time" v-text="item.time"/>
<div v-show="!item.isFromeMe" class="message-wrap">
<img src="../assets/image/robot/robot.png" class="head-pic">
<span class="triangle-left"/>
<p class="message" @click="showImg($event)" v-html="item.content"/>
</div>
<div v-show="item.isFromeMe" class="message-wrap">
<img v-show="userImg" :src="userImg" class="head-pic-right">
<img v-show="!userImg" src="../assets/image/robot/user7.png" class="head-pic-right">
<span class="triangle-right"/>
<p class="message-right" v-text="item.content"/>
</div>
</div>
<input style="width: 100%;height: 50px;margin-top: 300px">
<s-tab>
<tab-item>Vue</tab-item>
<tab-item>APP</tab-item>
</s-tab>
<h-content >
<list-item>
<item>
<div slot="name">客户名称</div>
<input slot="content" type="text" placeholder="请输入">
<section slot="name">姓名</section>
<input slot="content" type="text">
</item>
<item>
<section slot="name">年龄</section>
<input slot="content" type="text">
</item>
<item>
<section slot="name">性别</section>
<input slot="content" type="text">
</item>
<item>
<div slot="name">蜘蛛侠</div>
<input slot="content" type="text" placeholder="请输入">
<section slot="name">出生日前</section>
<input slot="content" type="text">
</item>
<item>
<div slot="name">蝙蝠侠</div>
<input slot="content" type="text" placeholder="请输入">
<section slot="name">体重</section>
<input slot="content" type="text">
</item>
<item>
<div slot="name">超人</div>
<input slot="content" type="text" placeholder="请输入" readonly>
<section slot="name">身高</section>
<input slot="content" type="text">
</item>
<item>
<div slot="name">钢铁侠</div>
<input slot="content" type="text" placeholder="请输入">
<section slot="name">血型</section>
<input slot="content" type="text" >
</item>
<item>
<div slot="name">蚁人</div>
<input slot="content" type="text" placeholder="请输入">
<section slot="name">胸围</section>
<input slot="content" type="text">
</item>
<item>
<div slot="name">黄蜂女</div>
<input slot="content" type="text" placeholder="请输入">
<section slot="name">腰围</section>
<input slot="content" type="text">
</item>
<item>
<div slot="name">雷神</div>
<input slot="content" type="text" placeholder="请输入">
<section slot="name">tun</section>
<input slot="content" type="text">
</item>
<item>
<div slot="name">洛基</div>
<input slot="content" type="text" placeholder="请输入">
<section slot="name">tun</section>
<input slot="content" type="text">
</item>
<item>
<div slot="name">绿巨人</div>
<input slot="content" type="text" placeholder="请输入">
<section slot="name">tun</section>
<input slot="content" type="text">
</item>
<item>
<section slot="name">tun</section>
<input slot="content" type="text">
</item>
<item>
<section slot="name">tun</section>
<input slot="content" type="text">
</item>
</list-item>
</scroll>
<bottom-tab class="bar bar-footer bar-light">
<label class="item item-input footer-input">
<textarea
v-auto-size ref="textarea" v-model="robot_message.question" placeholder="请输入"
rows="1"/>
</label>
<div class="footer-btn-wrap" @click="sendMsg()">
<div class="send-button">
<p>发送</p>
</div>
</div>
</bottom-tab>
</h-content>
<!-- <s-tab>
<tab-item>Vue</tab-item>
<tab-item>APP</tab-item>
</s-tab> -->
<!-- <div style="height: 40px;"/> -->
<bottom-tab/>
</h-view>
</template>
......@@ -101,7 +100,7 @@ export default {
},
mounted () {
this.height = this.$refs.textarea.clientHeight
// this.height = this.$refs.textarea.clientHeight
},
methods: {
scrollBottom () {
......@@ -197,7 +196,6 @@ export default {
.content {
background-color: #eeeeee;
//border: 1px solid red;
padding-bottom: 120px;
.message {
position: relative;
}
......
src/pages/layout.json 0 → 100644
View file @ 63a57615
This diff is collapsed.
src/pages/radioTest.vue 0 → 100644
View file @ 63a57615
/**
* @Author think
* @Date 2019-07-10 14:04
*/
<template>
<h-view title="CheckBox">
<h-content>
<list-item>
<item>
<section slot="name">注册国家</section>
<radio-group slot="content" v-model="radioValue">
<h-radio :checked="true" name="China" title="中国"/>
<h-radio :disable="true" name="Japan" title="日本"/>
<h-radio name="Other" title="其他"/>
</radio-group>
</item>
</list-item>
<radio-group v-model="radioValue">
<h-radio name="China" title="中国"/>
<h-radio :checked="true" :disable="true" name="Japan" title="日本"/>
<h-radio name="Other" title="其他"/>
</radio-group>
<list-item>
<item>
<h-check slot="left-icon" v-model="checkValue"/>
<section slot="content">CheckBox</section>
</item>
<item>
<div slot="name">switch滑块切换框</div>
<div slot="content"><h-switch v-model="switchValue"/></div>
</item>
</list-item>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'RadioTest',
data () {
return {
radioValue: 'Japan',
checkValue: false,
switchValue: false,
}
},
watch: {
radioValue (value) {
console.log(value)
},
},
methods: {},
}
</script>
<style scoped lang="less">
.hls-list-item {
.hls-item {
.radio-group {
display: flex;
.h-radio {
margin-right: 5px;
}
}
}
}
</style>
src/router/index.js
View file @ 63a57615
......@@ -5,6 +5,9 @@ import Home from '@/pages/home'
// test工具类
import HlsPopup from '@/pages/hlsPopup'
import Radio from '@/pages/radioTest'
import HFile from '@/pages/fileTest'
import Form from '@/pages/form'
Vue.use(Router)
......@@ -14,9 +17,12 @@ export default new Router({
path: '/',
redirect: '/home',
},
{path: '/home', component: Home, name: 'Home', meta: {keepAlive: true}},
{path: '/home', component: Home, name: 'Home', meta: {keepAlive: false}},
// test工具类
{path: '/hls-popup', component: HlsPopup, name: 'HlsPopup', meta: {keepAlive: false}},
{path: '/Radio', component: Radio, name: 'Radio', meta: {keepAlive: true}},
{path: '/HFile', component: HFile, name: 'HFile', meta: {keepAlive: true}},
{path: '/Form', component: Form, name: 'Form', meta: {keepAlive: true}}
],
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
......
src/scripts/directives.js 0 → 100755
View file @ 63a57615
This diff is collapsed.
src/scripts/filter.js 0 → 100644
View file @ 63a57615
export default (Vue) => {
Vue.filter('currency', function (val) {
if (!val) return '0.00'
var intPart = Number(val).toFixed(0) // 获取整数部分
var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
var floatPart = '.00' // 预定义小数部分
var value2Array = (val + '').split('.')
// =2表示数据有小数位
if (value2Array.length === 2) {
floatPart = value2Array[1].toString() // 拿到小数部分
if (floatPart.length === 1) { // 补0,实际上用不着
return intPartFormat + '.' + floatPart + '0'
} else {
return intPartFormat + '.' + floatPart
}
} else {
return intPartFormat + floatPart
}
})
Vue.filter('uncurrency', function (val) {
if (!val) return null
return Number((val).replace(/,/gi, ''))
})
Vue.filter('datetime', timestamp => {
function format (number) {
return number.toString().padStart(2, '0')
}
const date = new Date(Number.parseInt(timestamp, 10))
const YYYY = date.getFullYear()
const MM = date.getMonth() + 1
const DD = date.getDate()
const hh = date.getHours()
const mm = date.getMinutes()
const ss = date.getSeconds()
return `${YYYY}-${format(MM)}-${format(DD)} ${format(hh)}:${format(mm)}:${format(ss)}`
})
}
src/scripts/hlsHttp.js 0 → 100755
View file @ 63a57615
This diff is collapsed.
src/scripts/hlsPopup.js 0 → 100755
View file @ 63a57615
This diff is collapsed.
src/scripts/hlsUtil.js 0 → 100755
View file @ 63a57615
This diff is collapsed.
src/scripts/login.js 0 → 100644
View file @ 63a57615
This diff is collapsed.
src/scripts/utils.js 0 → 100644
View file @ 63a57615
This diff is collapsed.
src/styles/variables.less
View file @ 63a57615
This diff is collapsed.
yarn.lock
View file @ 63a57615
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment