benyuanzhang
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(playground): add playground support mobile mode (#1226) 

* feat(playground):  add playground support mobile mode

* fix(charts):  fix demo import echarts/line
This commit is contained in:
申君健 2023-12-28 16:53:40 +08:00 committed by GitHub
parent 1feb3acae0
commit 843ef6bd5c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/sites/demos/pc/app/chart/histogram/demo4-composition-api.vue
View File

@ -5,9 +5,7 @@
</template> </template>
<script setup lang="jsx"> <script setup lang="jsx">
// 因为柱状图内使用了折线图，使用前需先引入对应模块
import { ref } from 'vue' import { ref } from 'vue'
import 'echarts/lib/chart/line'
import { ChartHistogram as TinyChartHistogram } from '@opentiny/vue' import { ChartHistogram as TinyChartHistogram } from '@opentiny/vue'
const chartData = ref({ const chartData = ref({

2
examples/sites/demos/pc/app/chart/histogram/demo4.vue
View File

@ -5,8 +5,6 @@
</template> </template>
<script lang="jsx"> <script lang="jsx">
// 因为柱状图内使用了折线图，使用前需先引入对应模块
import 'echarts/lib/chart/line'
import { ChartHistogram } from '@opentiny/vue' import { ChartHistogram } from '@opentiny/vue'
export default { export default {

8
examples/sites/playground/App.vue
View File

@ -38,6 +38,7 @@ const createImportMap = (version) => {
'@opentiny/vue-locale': `${getRuntime(version)}tiny-vue-locale.mjs`, '@opentiny/vue-locale': `${getRuntime(version)}tiny-vue-locale.mjs`,
'@opentiny/vue-common': `${getRuntime(version)}tiny-vue-common.mjs`, '@opentiny/vue-common': `${getRuntime(version)}tiny-vue-common.mjs`,
'@opentiny/vue-theme/': `${cdnHost}/@opentiny/vue-theme@${version}/`, '@opentiny/vue-theme/': `${cdnHost}/@opentiny/vue-theme@${version}/`,
'@opentiny/vue-theme-mobile/': `${cdnHost}/@opentiny/vue-theme-mobile@${version}/`,
'@opentiny/vue-renderless/': `${cdnHost}/@opentiny/vue-renderless@${version}/`, '@opentiny/vue-renderless/': `${cdnHost}/@opentiny/vue-renderless@${version}/`,
'sortablejs': `${cdnHost}/sortablejs@1.15.0/modular/sortable.esm.js` 'sortablejs': `${cdnHost}/sortablejs@1.15.0/modular/sortable.esm.js`
} }
@ -73,6 +74,7 @@ const getTinyTheme = (version) => {
const hash = location.hash.slice(1) const hash = location.hash.slice(1)
const shareData = hash.split('|') const shareData = hash.split('|')
// eslint-disable-next-line new-cap
const store = new useStore({ const store = new useStore({
serializedState: shareData.length === 2 ? shareData[1] : '', serializedState: shareData.length === 2 ? shareData[1] : '',
showOutput: true, showOutput: true,
@ -154,6 +156,11 @@ function insertStyleDom(version) {
link.href = getTinyTheme(version) link.href = getTinyTheme(version)
iframeWin.addEventListener('DOMContentLoaded', () => { iframeWin.addEventListener('DOMContentLoaded', () => {
iframeWin.document.head.append(link) iframeWin.document.head.append(link)
// 增加mobile支持，增加mobile的样式表
const mobileLink = link.cloneNode(true)
mobileLink.href = `${cdnHost}/@opentiny/vue-theme-mobile@${version}/index.css`
iframeWin.document.head.append(mobileLink)
}) })
}) })
} }
@ -171,6 +178,7 @@ function getDemoName(name, apiMode) {
return name.replace(/\.vue$/, `${apiMode === 'Options' ? '' : '-composition-api'}.vue`) return name.replace(/\.vue$/, `${apiMode === 'Options' ? '' : '-composition-api'}.vue`)
} }
// eslint-disable-next-line unused-imports/no-unused-vars
const getDemoCode = async ({ cmpId, fileName, apiMode, mode }) => { const getDemoCode = async ({ cmpId, fileName, apiMode, mode }) => {
const demoName = getDemoName(`${getWebdocPath(cmpId)}/${fileName}`, apiMode) const demoName = getDemoName(`${getWebdocPath(cmpId)}/${fileName}`, apiMode)
const path = tinyMode === 'mobile-first' ? `@demos/mobile-first/app/${demoName}` : `${staticDemoPath}/${demoName}` const path = tinyMode === 'mobile-first' ? `@demos/mobile-first/app/${demoName}` : `${staticDemoPath}/${demoName}`