diff --git a/sites/a.mla.xin/components/mip-bannerapi/README.md b/sites/a.mla.xin/components/mip-bannerapi/README.md new file mode 100644 index 000000000..b10fa3aee --- /dev/null +++ b/sites/a.mla.xin/components/mip-bannerapi/README.md @@ -0,0 +1,63 @@ +# mip-bannerapi + +标题|内容 +----|---- +类型| +支持布局| +所需脚本| [https://c.mipcdn.com/extensions/platform/v2/a.mla.xin/mip-bannerapi/mip-bannerapi.js](https://c.mipcdn.com/extensions/platform/v2/a.mla.xin/mip-bannerapi/mip-bannerapi.js) + +## 说明 + +扩展官方 mip-carousel 多图轮播，通过json的方式获取数据 + +## 示例 + +示例说明 + +``` + + +``` + +## 属性 + +### url + +**获取json的地址**： + +**必选项**：是 + +**单位**：无 + +**默认值**：# + +### bwidth + +**轮播图的宽度**： + +**必选项**：否 + +**单位**：px + +**默认值**：1920 + +### bheight + +**轮播图的宽度**： + +**必选项**：否 + +**单位**：px + +**默认值**：500 + +### defer + +**轮播的间隔时间**： + +**必选项**：否 + +**单位**：px + +**默认值**：3000 diff --git a/sites/a.mla.xin/components/mip-bannerapi/example/index.html b/sites/a.mla.xin/components/mip-bannerapi/example/index.html new file mode 100644 index 000000000..8a8764d06 --- /dev/null +++ b/sites/a.mla.xin/components/mip-bannerapi/example/index.html @@ -0,0 +1,26 @@ + + + + + + MIP page + + + + + +
+ + + +
+ + + + diff --git a/sites/a.mla.xin/components/mip-bannerapi/mip-bannerapi.js b/sites/a.mla.xin/components/mip-bannerapi/mip-bannerapi.js new file mode 100644 index 000000000..a6bc3385c --- /dev/null +++ b/sites/a.mla.xin/components/mip-bannerapi/mip-bannerapi.js @@ -0,0 +1,33 @@ +const { util } = MIP +const { dom } = util +export default class MIPBannerapi extends MIP.CustomElement { + build () { + let me = this + let url = this.element.getAttribute('url') + let width = this.element.getAttribute('bwidth') ? this.element.getAttribute('bwidth') : 1920 + let height = this.element.getAttribute('bheight') ? this.element.getAttribute('bheight') : 500 + let defer = this.element.getAttribute('defer') ? this.element.getAttribute('defer') : 5000 + let carousel = dom.create(``) + let dot = dom.create(`
`) + let objHtml = '' + let dotHtml = '' + window.fetch(url).then(function (res) { + return res.json() + }).then(function (data) { + let oData = data.data + for (let i = 0; i < oData.length; i++) { + objHtml = `` + objHtml + if (i === 0) { + dotHtml += `
` + } else { + dotHtml += `
` + } + } + dotHtml = `` + carousel.innerHTML = objHtml + dot.innerHTML = dotHtml + me.element.appendChild(carousel) + me.element.appendChild(dot) + }) + } +} diff --git a/sites/a.mla.xin/mip.config.js b/sites/a.mla.xin/mip.config.js new file mode 100644 index 000000000..d5457bef4 --- /dev/null +++ b/sites/a.mla.xin/mip.config.js @@ -0,0 +1,31 @@ +/** + * @file mip页面项目配置项 + * @author + */ + +module.exports = { + dev: { + /** + * 启动mip server调试的端口号 + * + * @type {number} + */ + port: 8111, + + /** + * 启用调试页面自动刷新 + * + * @type {boolean} + */ + livereload: true, + + /** + * server 启动自动打开页面，false 为关闭 + * 如: + * autoopen: '/example/index.html' + * + * @type {string|boolean} + */ + autoopen: false + } +} diff --git a/sites/a.mla.xin/package.json b/sites/a.mla.xin/package.json new file mode 100644 index 000000000..7578cfdd3 --- /dev/null +++ b/sites/a.mla.xin/package.json @@ -0,0 +1,25 @@ +{ + "name": "mla.xin", + "version": "0.0.1", + "description": "banner通过json的方式获取", + "scripts": { + "dev": "mip2 dev", + "build": "mip2 build", + "lint": "npm run lint:js", + "lint:js": "eslint --ext .vue,.js .", + "fix": "npm run fix:js", + "fix:js": "eslint --ext .vue,.js . --fix" + }, + "author": "mla (admin@mla.xin)", + "dependencies": {}, + "devDependencies": { + "eslint": "^4.19.1", + "eslint-config-standard": "^11.0.0", + "eslint-plugin-import": "^2.12.0", + "eslint-plugin-jsdoc": "^3.7.1", + "eslint-plugin-node": "^6.0.1", + "eslint-plugin-promise": "^3.8.0", + "eslint-plugin-standard": "^3.1.0", + "eslint-plugin-vue": "^4.5.0" + } +}