Skip to content
项目
群组
代码片段
帮助
正在加载...
帮助
提交反馈
为 GitLab 提交贡献
登录
切换导航
iBiz-Vue-Mob-R7-Res
项目
项目
详情
动态
版本
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
计划
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
统计图
创建新议题
作业
提交
议题看板
打开侧边栏
iBiz-R7前端标准模板
iBiz-Vue-Mob-R7-Res
提交
2582c038
提交
2582c038
编写于
9月 16, 2020
作者:
KK
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
主题组件
上级
7e8fbbde
变更
2
隐藏空白字符变更
内嵌
并排
正在显示
2 个修改的文件
包含
45 行增加
和
7 行删除
+45
-7
app-mob-select-changeTheme.less
...pp-mob-select-changeTheme/app-mob-select-changeTheme.less
+7
-0
app-mob-select-changeTheme.vue
...app-mob-select-changeTheme/app-mob-select-changeTheme.vue
+38
-7
未找到文件。
src/components/app-mob-select-changeTheme/app-mob-select-changeTheme.less
浏览文件 @
2582c038
...
@@ -32,4 +32,11 @@
...
@@ -32,4 +32,11 @@
border-left: 5px solid transparent;
border-left: 5px solid transparent;
color: #615e5ec4;
color: #615e5ec4;
}
}
.activeoption{
padding: 5px;
font-size: 12px;
width: 50px;
text-align: center;
border-radius: 2px;
}
}
}
\ No newline at end of file
src/components/app-mob-select-changeTheme/app-mob-select-changeTheme.vue
浏览文件 @
2582c038
<
template
>
<
template
>
<div
class=
"app-mobile-select"
>
<div
class=
"app-mobile-select"
@
click=
"open"
>
<div
class=
"ion-select-icon"
>
</div>
<div
class=
"activeoption"
v-if=
"activeoption"
:style=
"
{'background':activeoption.background,'color':activeoption.color}">
{{
activeoption
.
text
}}
</div>
<ion-select
:value=
"curValue"
@
ionChange=
"change"
interface=
"action-sheet"
:cancel-text=
"$t('app.button.cancel')"
>
<ion-select
v-show=
"false"
ref=
"themeselect"
:value=
"curValue"
@
ionChange=
"change"
interface=
"action-sheet"
:cancel-text=
"$t('app.button.cancel')"
>
<ion-select-option
v-for=
"option of options"
:key=
"option.value"
:value=
"option.value"
class=
"mob-select-text"
>
{{
option
.
text
}}
</ion-select-option>
<ion-select-option
v-for=
"option of options"
:key=
"option.value"
:value=
"option.value"
class=
"mob-select-text"
>
{{
option
.
text
}}
</ion-select-option>
</ion-select>
</ion-select>
</div>
</div>
</
template
>
</
template
>
...
@@ -15,6 +14,8 @@ import { Vue, Component, Prop, Provide, Emit, Watch, } from "vue-property-decora
...
@@ -15,6 +14,8 @@ import { Vue, Component, Prop, Provide, Emit, Watch, } from "vue-property-decora
components
:
{},
components
:
{},
})
})
export
default
class
AppSelect
extends
Vue
{
export
default
class
AppSelect
extends
Vue
{
/**
/**
* 当前选中值
* 当前选中值
* @memberof AppSelect
* @memberof AppSelect
...
@@ -27,6 +28,8 @@ export default class AppSelect extends Vue {
...
@@ -27,6 +28,8 @@ export default class AppSelect extends Vue {
this
.
themeChange
(
value
.
detail
.
value
);
this
.
themeChange
(
value
.
detail
.
value
);
}
}
public
activeoption
:
any
=
{};
public
getTheme
(){
public
getTheme
(){
if
(
this
.
$router
.
app
.
$store
.
state
.
selectTheme
)
{
if
(
this
.
$router
.
app
.
$store
.
state
.
selectTheme
)
{
return
this
.
$router
.
app
.
$store
.
state
.
selectTheme
;
return
this
.
$router
.
app
.
$store
.
state
.
selectTheme
;
...
@@ -53,9 +56,9 @@ export default class AppSelect extends Vue {
...
@@ -53,9 +56,9 @@ export default class AppSelect extends Vue {
* @memberof AppSelect
* @memberof AppSelect
*/
*/
public
options
:
any
[]
=
[
public
options
:
any
[]
=
[
{
value
:
"app-blue-theme"
,
text
:
"dark"
},
{
value
:
"app-blue-theme"
,
text
:
"dark"
,
background
:
"#705697"
,
color
:
"#fff"
},
{
value
:
"app-dark-blue-theme"
,
text
:
"light"
},
{
value
:
"app-dark-blue-theme"
,
text
:
"light"
,
background
:
"#5475ab"
,
color
:
"#fff"
},
{
value
:
"app-default-theme"
,
text
:
"
default
"
},
{
value
:
"app-default-theme"
,
text
:
"
fault"
,
background
:
"#3880ff"
,
color
:
"#fff
"
},
];
];
/**
/**
...
@@ -63,6 +66,7 @@ export default class AppSelect extends Vue {
...
@@ -63,6 +66,7 @@ export default class AppSelect extends Vue {
*/
*/
public
mounted
()
{
public
mounted
()
{
this
.
activeTheme
=
this
.
getTheme
();
this
.
activeTheme
=
this
.
getTheme
();
this
.
setActiveoption
();
}
}
/**
/**
...
@@ -73,6 +77,20 @@ export default class AppSelect extends Vue {
...
@@ -73,6 +77,20 @@ export default class AppSelect extends Vue {
*/
*/
public
activeTheme
=
""
;
public
activeTheme
=
""
;
/**
* 设置
*
* @type {any[]}
* @memberof AppSelect
*/
public
setActiveoption
(){
let
index
=
this
.
options
.
findIndex
((
item
:
any
)
=>
{
return
this
.
activeTheme
==
item
.
value
;
})
console
.
log
(
index
);
this
.
activeoption
=
index
>-
1
?
this
.
options
[
index
]:
null
;
}
/**
/**
* 主题变化
* 主题变化
*
*
...
@@ -85,8 +103,21 @@ export default class AppSelect extends Vue {
...
@@ -85,8 +103,21 @@ export default class AppSelect extends Vue {
localStorage
.
setItem
(
'theme-class'
,
val
);
localStorage
.
setItem
(
'theme-class'
,
val
);
this
.
$router
.
app
.
$store
.
commit
(
'setCurrentSelectTheme'
,
val
);
this
.
$router
.
app
.
$store
.
commit
(
'setCurrentSelectTheme'
,
val
);
}
}
this
.
setActiveoption
();
}
}
/**
* 打开
*
* @param {*} val
* @memberof AppTheme
*/
public
open
(){
let
select
:
any
=
this
.
$refs
.
themeselect
;
if
(
select
){
select
.
open
();
}
}
}
}
</
script
>
</
script
>
...
...
编辑
预览
Markdown
格式
0%
请重试
or
添加新附件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
先完成此消息的编辑!
取消
想要评论请
注册
或
登录