feat: 新增 .m-pure-button 样式

project.config.json

@@ -30,8 +30,15 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 5,
+			"current": 7,
 			"list": [
+				{
+					"id": -1,
+					"name": "pages/Home",
+					"pathName": "pages/Home",
+					"query": "",
+					"scene": null
+				},
 				{
 					"id": -1,
 					"name": "pages/Sticky",
@@ -71,9 +78,17 @@
 					"id": -1,
 					"name": "pages/SinglePicker",
 					"pathName": "pages/SinglePicker",
+					"query": "",
+					"scene": null
+				},
+				{
+					"id": 6,
+					"name": "pages/Style",
+					"pathName": "pages/Style",
+					"query": "",
 					"scene": null
 				}
 			]
 		}
 	}
-}
+}

src/app.tsx

@@ -5,13 +5,14 @@ import { component } from './components/component'
 class App extends component() {
   config: Taro.Config = {
     pages: [
+      // @index('./pages/*.tsx', (pp, cc) => `'${pp.path.replace(/^\.\//, '')}',`)
       'pages/Home',
-      // @index('./pages/*[!Home].tsx', (pp, cc) => `'${pp.path.replace(/^\.\//, '')}',`)
       'pages/Picker',
       'pages/PickerView',
       'pages/Popup',
       'pages/SinglePicker',
       'pages/Sticky',
+      'pages/Style',
       'pages/Transition',
       // @endindex
     ],

src/components/Style/PureButton.scss

@@ -0,0 +1,34 @@
+@import '../../styles/settings.scss';
+
+/**
+ * 去除原生 Button 组件自带的样式。
+ * 现在它与 View 组件的唯一区别：
+ * 内容默认居中。
+ */
+button.m-pure-button {
+  position: relative;
+  display: block;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  outline: none;
+  font: inherit;
+  border-radius: 0;
+  border: none;
+  color: inherit;
+  background: inherit;
+  overflow: auto;
+  box-sizing: content-box;
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent;
+
+  &.button-hover {
+    color: inherit;
+    background: inherit;
+  }
+
+  &::before,
+  &::after {
+    content: none;
+  }
+}

src/components/index.ts

@@ -1,4 +1,4 @@
-// @index('./[A-Z]*', (pp, cc) => `export { default as M${pp.name} } from '${pp.path}'`)
+// @index(['./[A-Z]*', '!./Style'], (pp, cc) => `export { default as M${pp.name} } from '${pp.path}'`)
 export { default as MPicker } from './Picker'
 export { default as MPickerView } from './PickerView'
 export { default as MPopup } from './Popup'
@@ -8,7 +8,7 @@ export { default as MTransition } from './Transition'
 // @endindex
 
 export type ComponentName = (
-  // @index('./[A-Z]*', (pp, cc, { last }) => `'${pp.name}'${last ? '' : ' |'}`)
+  // @index(['./[A-Z]*', '!./Style'], (pp, cc, { last }) => `'${pp.name}'${last ? '' : ' |'}`)
   'Picker' |
   'PickerView' |
   'Popup' |

src/pages/Home.tsx

@@ -44,6 +44,11 @@ const componentList: ComponentInfo[] = [
     chineseName: '单项选择器',
     url: pageUrls.SinglePicker,
   },
+  {
+    name: 'Style' as any,
+    chineseName: '样式',
+    url: pageUrls.Style,
+  },
 ]
 
 export default class Home extends component({

src/pages/Style.tsx

@@ -0,0 +1,26 @@
+import Taro from '@tarojs/taro'
+import { Button, View } from '@tarojs/components'
+import { component } from '../components/component'
+import { XItem, XList, XTitle } from './components'
+
+export default class Style extends component() {
+  render() {
+    return (
+      <View>
+        <XTitle>.m-pure-button</XTitle>
+        <XList>
+          <XItem
+            title='去除原生 Button 组件自带的样式，仅保留文字居中，如：'
+          />
+          <XItem>
+            <Button
+              className='m-pure-button'
+              openType='openSetting'>
+              {'打开设置'}
+            </Button>
+          </XItem>
+        </XList>
+      </View>
+    )
+  }
+}

src/pages/components/Item.scss

@@ -2,7 +2,7 @@
 
 .item {
   position: relative;
-  padding: 0 15px;
+  padding: 10px 15px;
   min-height: 50px;
   box-sizing: border-box;
   display: flex;

src/pages/index.ts

@@ -6,6 +6,7 @@ export const pageUrls = {
   Popup: '/pages/Popup' as '/pages/Popup',
   SinglePicker: '/pages/SinglePicker' as '/pages/SinglePicker',
   Sticky: '/pages/Sticky' as '/pages/Sticky',
+  Style: '/pages/Style' as '/pages/Style',
   Transition: '/pages/Transition' as '/pages/Transition',
   // @endindex
 }

src/styles/components.scss

@@ -3,4 +3,5 @@
 @import '../components/PickerView/index.scss';
 @import '../components/Popup/index.scss';
 @import '../components/Sticky/index.scss';
+@import '../components/Style/PureButton.scss';
 @import '../components/Transition/index.scss';